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>

Answer 2

with preventDefault() If this method is called, the default action of the event will not be triggered.
Try this code please:

$(document).on('click', '#CKEditor1', function(ev){
   ev.preventDefault();
   alert('hello');
   return false;
});

This might help you.

Answer 3

event.preventDefault() documentation

Description: If this method is called, the default action of the event will not be triggered.

add this ...

 ev.preventDefault();

in you code

  $('#CKEditor1').on('click', function (ev) {
      ev.preventDefault();
      alert('hello');
      return false;
  });

Answer 4

Use mousedown rather than click on submit button, and add ev.preventDefault to stop submit.

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

Answer 5

Go to the ckeditorcontrol properties and find the prerender event so you can save your text in database with prerender event.

protected void CKEditorControl2_PreRender(object sender, EventArgs e)
{
  if (!string.IsNullOrWhiteSpace(CKEditorControl2.Text))
  {
    // write here what you want to save in your database.
  }
}