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 messed up the toolbar grouping for me (put the save button at the end), and the other answer did not 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'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'});
     }
    }