Events 使用ckeditor"；“关键”；CKEDITOR.instances.editor.on（'；键'；，函数（e）{

我意识到关于如何为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”一定是在旧版本中

我希望我已经清楚地说明了我的问题。

这样做有效：

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

---

我会等一会儿再检查答案，以防其他人愿意参与。

我认为您可以使用onChange插件：

这是一个正确的方法：

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

关于侦听DOM事件，有一些规则。请参阅：

• ,

---

此外，我宁愿避免在每次键控时调用

编辑器.getData（）

。这种方法不是很轻量级-它不仅仅是简单地读取

.innerHTML

。因此，您应该考虑定期更新（当编辑器处于焦点时）或

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

---

对我来说，它不起作用，因为keyup没有被激发。我在这里结合了这个答案和使用setTimeout的建议。现在它对我起作用了。此外，我在源代码视图中使用key事件，在所见即所得视图中使用change事件。我忽略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))

---

谢谢，我将试用它！这是一个如何使用该插件创建实时预览的示例：是的，它可以工作。注意：您可以使用

CKEDITOR.instances['editor']

或

CKEDITOR.instances.editor

，3次。为了可读性和一致性，我建议在前面使用

var editor=CKEDITOR.instances['editor']

并改用它（尽管这是一行额外的代码）

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