Question

CKEDITOR.plugins.add('Copyall', {
init: function(editor) {
    editor.addCommand('copy_all', {
        exec : function(editor){
            alert('Yay!');
        }
    });
    editor.ui.addButton('Copyall', {
        label: 'Copy All',
        command: 'copy_all',
        toolbar: 'basicstyles',
        icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
    });
}
});

CKEDITOR.config.toolbar = [
{name: 'basicstyles', items : ['Copyall', 'Font', 'FontSize', 'Bold', 'Italic', 'Strike']},
];

我有一个简单的内联CKEDITOR元素菜单。我只需要一个按钮就可以完成一些工作。

https://jsfiddle.net/elb_/as1km50L/

Answer 1

为您的可编辑区域添加ID：

<div id="editor1" contenteditable="true">some text</div>

然后，使用您的id添加命令和没有插件的按钮：

CKEDITOR.instances.editor1.addCommand('copy_all', {
     exec : function(editor) {
         alert('Yay!');
     }
});

CKEDITOR.instances.editor1.ui.addButton('Copyall', {
    label: 'Copy All',
    command: 'copy_all',
    toolbar: 'basicstyles',
    icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
});

CKEDITOR.config.toolbar = [
{name: 'basicstyles', items : ['Copyall', 'Font', 'FontSize', 'Bold', 'Italic', 'Strike']},
];

请参阅：https://jsfiddle.net/as1km50L/1/

Answer 2

CKEDITOR.inlineAll();
for (var instanceName in CKEDITOR.instances) {
    CKEDITOR.instances[instanceName].addCommand('copy_all', {
        exec: function(edt) {
           alert('Yay!');
        }   
    });

    CKEDITOR.instances[instanceName].ui.addButton('Copyall', {
        label: 'Copy All',
        command: 'copy_all',
        toolbar: 'basicstyles',
        icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
    }); 
}

CKEDITOR.config.toolbar = [ 
    {name: 'basicstyles', items : ['Copyall', 'Font', 'FontSize', 'Bold', 'Italic', 'Strike']},
];

看到上面的CKEDITOR.inlineAll（）方法？事实证明CKEDITOR实例无法自定义，除非那里有美。值得注意的是，如果没有inlineAll（），CKEDITOR.instances将显示为已填充，但由于某种原因无法迭代。

无论如何，问题解决了。

CKEDITOR添加一个简单的按钮不应该这么困难

2 个答案: