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

时间:2011-06-17 13:26:07

标签: javascript ckeditor

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

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

任何想法我可以在哪里添加代码?在哪个文件或以什么方式?

6 个答案:

答案 0 :(得分:33)

存档的代码是这样的:

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

答案 1 :(得分:5)

您是否需要跟踪更改?

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

答案 2 :(得分:1)

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

答案 3 :(得分:0)

我已经测试了这里提出的一些解决方案,当我找到这个链接时,我得到了答案: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();
    }); 
});

答案 4 :(得分:-1)

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

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

答案 5 :(得分:-3)

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