javascript - 如何在CKEditor的保存按钮上捕获点击事件

Question

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

  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>