Question

我意识到有关如何为CKEDITOR 4实现事件处理程序的问题。我能够使用此代码来获取关键数据，但我似乎无法在键入后获取数据：

CKEDITOR.instances.editor.on('key', function (e){
    document.getElementById("preview").innerHTML = CKEDITOR.instances.editor.getData();
});

因此，当我在文本编辑器字段中键入类似“aaa”的字符串时，永远不会获取第一个字符。所以我的div id =“preview”只显示“aa”。我已经迭代了e对象，这是非常复杂的，但没有任何东西让我觉得有用解决这个问题。

我也没有看到其他人写这个。在CKEDITOR中似乎没有“keyup”事件，尽管我看到它写了很多。 “keyup”一定是旧版本的？

我希望我已经明确说明了我的问题。

Answer 1

这有效：

CKEDITOR.instances['editor'].on('contentDom', function() {
    CKEDITOR.instances['editor'].document.on('keyup', function(event) {
        document.getElementById("preview").innerHTML = CKEDITOR.instances.editor.getData();
    });
});

在检查答案之前我会稍等一下，以防其他人愿意做出贡献。

Answer 2

这是一种正确的方法：

editor.on( 'contentDom', function() {
    editor.editable().attachListener( 'keyup', editor.document, function( evt ) {
        // ...
    } );
} );

关于侦听DOM事件有一些规则。参见：

另外，我宁愿避免在每个密钥上调用editor.getData()。这种方法不是很轻巧 - 它比简单的阅读.innerHTML做得更多。因此，您应该考虑定期更新（编辑器聚焦时）或onchange plugin。

Answer 3

我认为您可以使用onChange插件：http://ckeditor.com/addon/onchange

...
on: {
    change: function(event) {
        // your code
    }
}
...

Answer 4

为我工作

CKEDITOR.on('instanceCreated', function(e) {
    e.editor.on('contentDom', function() {
        var editable = e.editor.editable();
        editable.attachListener(editable, 'keyup', function() {
            var content = editable.getData()
            //your content               
        });
    });
});

Answer 5

对我来说，它没有用，因为keyup没有被解雇。我将此答案与使用setTimeout here的建议结合起来。现在它对我有用。另外，我在源代码视图中使用键事件并在WYSIWYG视图中更改事件。我忽略CTL和CMD（1114203,1111412）以便能够在源代码视图中正确识别c＆amp; p。 200毫秒对我来说似乎足够了。

  CKEDITOR.instances.editor.on('key', function (e) {
    if ([1114203, 1114129].indexOf(e.data.keyCode) === -1) {
      setTimeout(() => {
        let data = CKEDITOR.instances.editor.getData()
        // do something with data
      }, 200)
    }
  }.bind(this))

  CKEDITOR.instances.editor.on('change', function () {
    let data = CKEDITOR.instances.editor.getData()
    // do something with data
  }.bind(this))

使用ckeditor“key”CKEDITOR.instances.editor.on（'key'，function（e）{

5 个答案: