使用 ckeditor "key" CKEDITOR.instances.editor.on('key'， function (e){

Question

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

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

因此，当我在文本编辑器字段中键入像"aaa"这样的字符串时，永远不会获取第一个字符。所以我的div id="preview"将只显示"aa"。我已经遍历了e对象，这很复杂，但我觉得没有什么对解决这个问题有用。

我也没有看到其他人写这个。似乎没有一个"keyup"事件在CKEDITOR，虽然我看到它写了很多。"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事件有一些规则。看到:

• 编辑# contentDom事件,
• 编辑# attachListener方法。

而且，我宁愿避免在每次keyup时调用editor.getData()。这个方法不是很轻量级——它比简单地读取.innerHTML做得更多。因此，您应该考虑定期更新(当编辑器集中时)或onchange插件。

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的建议结合起来。现在它对我有用了。此外，我在源代码视图中使用关键事件，在所见即所得视图中使用更改事件。我忽略CTL和CMD(1114203,1114129)，以便能够在源代码视图中正确识别c&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))