如何覆盖 CKEditor 中按钮的处理程序？

Question

我想要一个用于 Save 按钮的自定义处理程序。

如何覆盖默认命令？

Answer 1

当前热门答案搞乱了我的工具栏分组（将保存按钮放在最后） ），并且其他答案在 CKEditor v4 中不起作用。

以下是在 CKEditor 4 中执行此操作的方法：

HTML：

<textarea id="CKEditor1"></textarea>

JavaScript：

<script>
    // Need to wait for the CKEditor instance to finish initialization
    // because CKEDITOR.instances.editor.commands is an empty object
    // if you try to use it immediately after CKEDITOR.replace('editor');
    CKEDITOR.on('instanceReady', function (ev) {

        // Create a new command with the desired exec function
        var editor = ev.editor;
        var overridecmd = new CKEDITOR.command(editor, {
            exec: function(editor){
                // Replace this with your desired save button code
                alert(editor.document.getBody().getHtml());
            }
        });

        // Replace the old save's exec function with the new one
        ev.editor.commands.save.exec = overridecmd.exec;
    });

    CKEDITOR.replace('CKEditor1');

</script>

Answer 2

CKEDITOR.plugins.registered['save']=
    {
     init : function( editor )
     {
        var command = editor.addCommand( 'save',
           {
              modes : { wysiwyg:1, source:1 },
              exec : function( editor ) {
                 //YOUR CODE
              }
           }
        );
        editor.ui.addButton( 'Save',{label : 'YOUR LABEL',command : 'save'});
     }
    }

Answer 3

如果您只想覆盖一个实例的 save 命令，您可以尝试以下代码：

var editor = $('#myTextarea').ckeditorGet(); // Retrieving CKeditor instance with jQuery
editor.getCommand('save').exec = function(editor) { 
    // Do whatever you need to
    ...
    return true;
};

这应该适用于任何 CKEditor 命令。

Answer 4

function configureEditor(id) {
    var editor = CKEDITOR.replace(id);
    editor.on("instanceReady", function () {
        // Overwrite the default save function
        editor.addCommand("save", {
            modes: { wysiwyg: 1, source: 1 },
            exec: function () {
                // get the editor content
                var theData = editor.getData();
                alert("insert your code here");
            }
        });
        editor.ui.addButton('Save', { label: 'My Save', command: 'save', enabled: 'true' });
        var saveButton = $('#cke_' + id).find('.cke_button__save');
        saveButton.removeClass('cke_button_disabled');
    });
}

Answer 5

在 CKEditor 4 中，保存插件是可以取消的。如果不确定，可以随时查看 来源。您可以取消事件并在处理程序中应用您自己的逻辑，如本例所示：

// Assuming 'editor' is a CKEDITOR.editor instance
editor.on('save', function (event) {
    event.cancel();
    // Your custom command logic
    // (You can access the editor instance through event.editor)
});

我建议不要创建新命令并用它替换默认命令，因为这是不必要的解决方法。