How to override the handler for a button in ckeditor? - save

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

Answer 3

If you want to override the save command for just one instance, you can try the following code:
var editor = $('#myTextarea').ckeditorGet(); // Retrieving CKeditor instance with jQuery
editor.getCommand('save').exec = function(editor) {
// Do whatever you need to
...
return true;
};
This should work for any CKEditor command.

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 meant to be cancelable. If unsure, one can always have a look at the source. You can cancel the event and apply your own logic in a handler, like 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 advise against creating a new command and replacing the default with it, as it is an unnecessary workaround.