How to override the handler for a button in ckeditor?

Question

I would like to have a custom handler for the save button.

How can I override the default command?

Answer 1

the current top answer mixed up a group of tools for me (put the save button at the end) and the other answer didn't work in ckeditor v4.

Here's how to do it in 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 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

, :

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

In CKEditor 4, the save plugin is designed to be canceled. If you are not sure, you can always look at source . You can cancel the event and apply your own logic in the handler, as in this example:

//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)
});

I would suggest creating a new team and replacing it with the default, as this is an unnecessary workaround.