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

时间:2017-05-17 10:39:23

标签: ckeditor

我需要在没有插件的情况下向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'
        });
    }
}
});

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

1 个答案:

答案 0 :(得分: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"。 现在,在下面创建新按钮时,设置与" InsertCustomImage"相同的名称。在addButton函数中。