Question

我有以下代码用于检测ckeditor表面上的更改。

CKEDITOR.instances['editor1'].on("instanceReady", function(){                    
this.document.on("keyup", function(){
console.log("sth changed");
});
});

我想获得编辑内容，以便对其中的单词进行计数。如何使用CKEDITOR.instances？

与其联系

Answer 1

检索编辑器内容的唯一正确方式是：

CKEDITOR.instances.yourInstanceName.getData();

您还可以尝试this.on( 'key', function() { ... } );，因为编辑器会触发key个事件。

此外，我建议您the ticket关于onchange事件并在编辑器中监控更改。

最后但并非最不重要的是：The wordcount plugin已经实施并完成了你的工作;）

Answer 2

插件列表中有@AlfonsoML的“onChange”插件：
onChange

它涵盖的不仅仅是“keyUp”。您可以在他的博客上阅读更多内容，其中描述了捕获的不同事件：
onChange event for CKEditor

Answer 3

试试这个：

    CKEDITOR.instances["CKEditor"].on('change', function() { 
        console.log(this.getData());
    });

Answer 4

您可以使用此：

<script>   
    CKEDITOR.replace( 'editor1' );
    CKEDITOR.instances.editor1.on("change", function() {
        $("#content-val").html(this.getData())//show content inside #content-val div
    });
</script>

Answer 5

对于版本5，您使用editor.model.document.on('change:data', ...)。

非常像：

let someContent = '';

ClassicEditor.create(document.querySelector('#editor')).then(editor => {
  editor.model.document.on('change:data', () => {
    someContent = editor.getData()
  })
}).catch(err => {
  console.log('error loading ckeditor', err);
})

阅读文档：https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/basic-api.html#listening-to-changes

如何获取ckeditor的内容？

5 个答案: