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

问题描述 投票:14回答:6

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

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

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

javascript ckeditor
6个回答
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
    });
}); 

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实例。


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

0
投票

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

以下代码就像一个魅力:

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

-3
投票

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


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

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

© www.soinside.com 2019 - 2024. All rights reserved.