使用 CKEditor 在 setData 和模式更改时重置侦听器事件

Question

每当我的脚本调用 setData 或更改模式（"source"、"WYSIWYG"）时，我分配的事件的侦听器将不再被调用。

研究告诉我为什么，我一直在尝试建议的解决方案 (CKEDITOR.setData prevents attaching of events with .on function), including those from the official documentation (http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-contentDom)，但 none 的解决方案如文件所述对我有效，但我不知道为什么。

这里有其他人设法解决了这个问题吗？如果是这样，我将不胜感激。

我们当前是 CKEditor 的运行版本 4.5.10。

感谢您的期待。肯.

示例：

// Works until setData() is called or until the view mode is changed ("WYSIWYG", "SOURCE).

ev.editor.document.on( 'keydown', function( evt )
{
    console.log("Key Down");
});

// This appears to be the recommended resolution however, this does not
    // work for me even prior to setData() being called of the view mode being changed.

    editor.on( 'contentDom', function() {
    var editable = editor.editable();

    editable.attachListener( editor.document, 'keydown', function() {
    console.log("Key Down"); // Never executed
        } );
    } );

更新：这个解决方案（由 Dekel 建议）在我看来应该可行。但是，我怀疑我没有正确实现它，所以 Key Down 事件没有触发。对此的任何想法：

for (var i in CKEDITOR.instances) {
    CKEDITOR.instances[i].on('contentDom', function() {
        CKEDITOR.instances[i].document.on('keydown', function(event) {
            console.log('key down')
        });
    });
}

更新：完整代码示例。该事件似乎不再触发：

    <html>

<textarea name="editor1">
</textarea>

<textarea name="editor2">
</textarea>

<textarea name="editor3">
</textarea>

</html>

<script>

CKEDITOR.replace( 'editor1', {
  allowedContent: true
});

CKEDITOR.replace( 'editor2', {
  allowedContent: true
});

CKEDITOR.replace( 'editor3', {
  allowedContent: true
});

for (var i in CKEDITOR.instances) {
    CKEDITOR.instances[i].on('contentDom', function() {
        CKEDITOR.instances[i].document.on('keydown', function(event) {
            console.log('key down')
        });
    });
}

</script>

Answer 1

花了一些时间来了解问题所在，但我认为这就是您正在寻找的解决方案。

您需要在每次 DOM 准备就绪时附加 keydown 事件。为此 - 您需要监听编辑器的 contentDom 事件，然后在编辑器的文档上注册 keydown 事件。

CKEDITOR.instances.editor1.on( 'contentDom', function() {
    CKEDITOR.instances.editor1.document.on('keydown', function(event) {
        console.log('key down')
    });
});

In this example - editor1 is the name of the ckeditor instance.

您可以查看这个工作示例：
https://jsfiddle.net/gad701dc/

如果您有多个实例，则需要遍历它们并将其添加到每个实例中：

for (var i in CKEDITOR.instances) {
    CKEDITOR.instances[i].on('contentDom', function() {
        // The variable *this* here refers to the current instance of the ckeditor
        this.document.on('keydown', function(event) {
            console.log('key down')
        });
    });
}

You need to access the relevant editor, you should do it with this instead of CKEDITOR.instances[i], because the i variable will change before the call to the callback function will be made.

使用 CKEditor 在 setData 和模式更改时重置侦听器事件

Listener Events being reset on setData and mode change, using CKEditor

javascript

events

document

listener

ckeditor