How to fix click event on Save button in CKEditor

Question

I am trying to capture a click event on the 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 does not work. When I click the save button CKEditor, then the postback happens. if possible, help me with the correct code sample to capture the click event on the Save button in CKEditor. thanks

I got a 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 will help me lock the button click on the save button on the toolbar. thanks

Answer 1

Here (in my opinion) is a better / cleaner way to accomplish what you have already figured out. This will not replace anything with javascript that launches the save button, that is, it will not move the save button from its original tool 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 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 fired.
Try this code:

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

It can 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 your code

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

Answer 4

Use the mousedown button instead of click on the submit button and add ev.preventDefault to stop sending.

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

Answer 5

Go to ckeditorcontrol properties and find the prerender event to save the text in the database using the 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. } }