javascript - 如何在更改时获取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事件。

此外，我向您推荐有关编辑器中事件和监控更改的票证。onchange

最后但并非最不重要的一点：已经实施并完成您的工作的wordcount插件；）

Answer 2

插件列表中有一个来自@AlfonsoML 的“onChange”插件：
onChange

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

Answer 3

试试这个：

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

Answer 4

对于版本 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

Answer 5

你可以使用这个：

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