在ckeditor中为keypress添加事件监听器的代码

Posted 2021-04-11

我需要在加载CKEditor后为keypress添加一个事件监听器。代码类似于：

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

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

答案

存档的代码是这样的：

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，有一个更改事件，它不仅会触发键事件，还会触发粘贴，撤消，重做等。

在代码中它是这样的：

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

另一答案

你需要跟踪变化吗？

我最初使用上面的解决方案，但我最终用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实例。

另一答案

如果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
    }
});

另一答案

我已经测试了这里提出的一些解决方案，当我找到这个链接时，我得到了答案：qazxsw poi

以下代码就像一个魅力：

http://alfonsoml.blogspot.com.br/2011/03/onchange-event-for-ckeditor.html

另一答案

您可以在页面中或页面中包含的.js文件中添加该代码。这段代码并不神秘。

另一答案

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

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