3

我意识到有关于如何为 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”必须在旧版本中？

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

4

5 回答 5

7

这有效：

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

在检查答案之前，我会稍等片刻，以防其他人愿意贡献。

于 2013-05-23T12:18:28.180 回答
2

这是一个正确的方法：

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

有一些关于监听 DOM 事件的规则。看：

另外，我宁愿避免调用editor.getData()每个键盘。这种方法不是很轻量级——它不仅仅是简单的阅读.innerHTML。因此，您应该考虑定期更新（当编辑器聚焦时）或onchange 插件。

于 2013-05-23T15:36:32.730 回答
1

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

...
on: {
    change: function(event) {
        // your code
    }
}
...
于 2013-05-23T12:32:58.927 回答
1

它为我工作

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               
        });
    });
});
于 2016-03-22T07:05:25.200 回答
0

对我来说，它不起作用，因为 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))
于 2017-03-20T15:47:52.733 回答