如何获取ckeditor的内容？

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