How to capture click event on Save button of CKEditor

Question

i try to capture the the click event occur on save button of CKEditor this way

  var element = CKEDITOR.document.getById('CKEditor1');
  element.on('click', function (ev) {
      //ev.removeListener();
      alert('hello');
      return false;
  });

but it is not working.when i click on save button of CKEditor then a postback occur. if possible help me with right code sample to capture click event occur on Save button of CKEditor. thanks

I got the solution

  CKEDITOR.plugins.registered['save'] = {
      init: function (editor) {
         var command = editor.addCommand('save',
         {
              modes: { wysiwyg: 1, source: 1 },
              exec: function (editor) { // Add here custom function for the save button
              alert('You clicked the save button in CKEditor toolbar!');
              }
         });
         editor.ui.addButton('Save', { label: 'Save', command: 'save' });
      }
  }

the above code i was looking for. the above code help me to capture the click event of save button in toolbar. thanks

Answer 1

Here's a (in my opinion) better/cleaner way to accomplish what you already figured out. This does nothing but replace the javascript that the save button runs, meaning it will not move the save button out of its original toolbar group:

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 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>