在没有插件的情况下向 CKEditor 4.6.2 实例添加自定义按钮

Question

我需要在没有插件的情况下向 CKEditor 4.6.2 实例添加一个自定义按钮。

我已经尝试了类似问题中建议的解决方案如何将自定义按钮添加到调用 JavaScript 函数的工具栏？

不同之处在于我不想替换现有实例，而是在初始化后对其进行修改。像这里： http://jsfiddle.net/paragonid/8r4gk45n/1/

CKEDITOR.replace('container', {
on: {
    instanceReady: function( evt ) {
        console.log('instanceReady', evt)
        evt.editor.addCommand("mySimpleCommand", {
            exec: function(edt) {
                alert(edt.getData());
            }
        });
        evt.editor.ui.addButton('SuperButton', {
            label: "Click me",
            command: 'mySimpleCommand',
            toolbar: 'insert',
            icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
        });
    }
}
});

但在这种情况下不会出现按钮。

Answer 1

我也

遇到了同样的问题，这就是我解决我的方式-

 var editor = CKEDITOR.replace(ck, {
    toolbar: [['Source','-','Preview','Print'],['UIColor','Maximize','ShowBlocks'],
                  ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo','RemoveFormat','-','Link','Unlink','Anchor'],
                  ['Bold','Italic','Underline','Strike','Subscript','Superscript','RemoveFormat'],['Link','Unlink','Anchor'], '/',
                  ['NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl'],
                  ['Styles','Format','Font','FontSize'],['TextColor','BGColor'],'/',
                  {name: 'insert', items:['InsertCustomImage','Flash','Table','Iframe','HorizontalRule','Smiley','SpecialChar','PageBreak']}]   
    });
editor.addCommand("insertImgCmd", {
        exec: function(edt) {
            helper.showdlg(component);
        }
    });
    editor.ui.addButton('InsertCustomImage', {
        label: "Insert Image",
        command: 'insertImgCmd',
        toolbar: 'insert',
        icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
    });

在设置工具栏时，我插入了一个自定义命令名称"InsertCustomImage"。现在，在下面创建新按钮时，在addButton函数中设置与"插入自定义图像"相同的名称。