如何在CKEditor的Save按钮上捕获click事件

Question

我尝试以这种方式捕获CKEditor的保存按钮上发生的click事件

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

但它不起作用.当我点击CKEditor的保存按钮时,就会发生回发.如果可能的话,帮助我使用正确的代码示例捕获点击事件发生在CKEditor的保存按钮上.谢谢

我得到了解决方案

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

我正在寻找的上述代码.上面的代码帮助我捕获工具栏中的保存按钮的单击事件.谢谢

Answer 1

这是(在我看来)更好/更清洁的方式来完成你已经想到的.这只会替换保存按钮运行的javascript,这意味着它不会将保存按钮移出其原始工具栏组:

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

如果调用preventDefault()此方法，则不会触发事件的默认操作。
请尝试这个代码：

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

这可能对你有帮助。