在ckeditor中为按键添加事件监听器代码答案

【问题标题】：add code for event listener for keypress in ckeditor在ckeditor中为按键添加事件监听器代码
【发布时间】：2018-03-01 15:57:23
【问题描述】：

我需要在加载 CKEditor 后为按键添加事件侦听器。代码类似于：

CKEDITOR.instances.editor1.document.on('key', function(event) {
    /* instructions   */
});

知道我可以在哪里添加代码吗？在哪个文件中或以什么方式？

【问题讨论】：

标签： javascript ckeditor

【解决方案1】：

归档它的代码是这样的：

CKEDITOR.on('instanceCreated', function(e) {
        e.editor.on('contentDom', function() {
            e.editor.document.on('keyup', function(event) {
                // keyup event in ckeditor
            }
        );
    });
});

编辑 - 2014 - 由于这个答案仍然得到一些赞成，我觉得指出它是公平的，它适用于版本 3.x 中的 CKEditor。在 4.x 版本中，有一个 change 事件，它不仅会在关键事件上触发，还会在粘贴、撤消、重做等之后触发。

在代码中是这样的：

CKEDITOR.on('instanceCreated', function(e) {
    e.editor.on('change', function (event) {
        // change event in CKEditor 4.x
    });
});

【讨论】：

这会附加到创建的每个 CKEDITOR 实例吗？
@Chris 是的，如果它在创建实例之前设置
谢谢@Zeela。如果有一种方法可以将它附加到一个实例上，那就太好了。
@Chris 你总是可以使用编辑器的 id 来找出是哪个事件发生的，我相信 e.editor.id 是 CKEDITOR.instances 的索引，而 e.editor.name 将保存客户端 id编辑器实例或其底层元素，目前不确定是哪个。
你能告诉我为什么它不适合我吗？我刚刚用我的 CKEDITOR 的文本区域的 ID 替换了“instanceCreated”，但仍然看不到它在工作

【解决方案2】：

您需要跟踪更改吗？

我最初使用的是上面的解决方案，但我最终将其替换为 OnChange CKEditor plugin。这在某些特殊情况下很有用 - 例如，如果您使用工具栏添加链接，则按键不会注册任何内容。

这是一个代码示例，已更新为使用 instanceCreated（先安装 OnChange）：

CKEDITOR.on('instanceCreated', function(e) {
    if (e.editor.name === editorId) { //editorId is the id of the textarea
        e.editor.on('change', function(evt) {
            //Text change code
        });
    }
});

更新：根据上面的答案，CKEditor 现在有一个内置的更改事件，所以你不必安装插件来使用这个解决方案了。您仍然可以使用第二行代码将更改应用到您要编辑的 CKEditor 实例。

【讨论】：

【解决方案3】：

如果 keydown 逻辑对给定插件有意义，您可以将其包含在插件的定义中：

CKEDITOR.plugins.add('customPlugin', {
    // definition keys...
    init: function( editor ) {
        // Plugin logic
        ...

    // Register a  keydown event handler -- http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-key
    editor.on('key', function(event) {
        console.log('CKEDITOR keydown event from customPlugin'); // successfully captures keydown when registered from plugin
    }
});

【讨论】：

【解决方案4】：

我已经测试了这里提出的一些解决方案，当我找到这个链接时我得到了答案：http://alfonsoml.blogspot.com.br/2011/03/onchange-event-for-ckeditor.html

下面的代码就像一个魅力：

editor.on('contentDom', function()
{
    editor.document.on('keydown', function( event )
    {
        if ( !event.data.$.ctrlKey && !event.data.$.metaKey )
            somethingChanged();
    }); 
});

【讨论】：

【解决方案5】：

CKEDITOR.instances.editor1.on('change', function () { //Do something here.});

此代码注册任何更改事件，包括复制粘贴。

【讨论】：

此代码注册任何更改事件，包括复制粘贴。

【解决方案6】：

您将该代码添加到您的页面中，或者您的页面中包含的 .js 文件中。这段代码并不神秘。

【讨论】：

这是很久以前的事了，但我认为不公平的投票是不公平的，并且已经“撤消”了其中一个。问题是把代码放在哪里，而不是代码本身。除了页面上包含的 js 文件或页面上的 js 之外，您还会在哪里放置任何 ckEditor js 代码？我同意虽然答案有点简洁，而且不是特别有用。我还注意到@Gabriel 在他的回答中引用了同一作者的一篇文章（没有提到将代码放在哪里）。