向不带插件的CKEditor 4.6.2实例添加自定义按钮 [英] Add a custom button to CKEditor 4.6.2 instance without plugin

问题描述

我需要向不带插件的CKEditor 4.6.2实例添加自定义按钮。

我已经尝试了类似问题的建议解决方案How to add a custom button to the toolbar that calls a JavaScript function?

不同之处在于，我不想替换现有实例，而是希望在初始化后对其进行修改。如下所示：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'
        });
    }
}
});

但在这种情况下不显示按钮。

推荐答案

我也面临同样的问题，我就是这样解决我的问题的-

 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函数中设置与"InsertCustomImage"相同的名称。

这篇关于向不带插件的CKEditor 4.6.2实例添加自定义按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！