如何在更改时获取ckeditor的内容？答案

【问题标题】：How to get the contents of ckeditor on change?如何在更改时获取ckeditor的内容？
【发布时间】：2013-05-15 08:24:36
【问题描述】：

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

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

我想获取编辑器的内容以计算其中的单词。如何使用CKEDITOR.instances 联系它？

【问题讨论】：

标签： javascript plugins ckeditor

【解决方案1】：

获取编辑器内容的唯一正确方法是：

CKEDITOR.instances.yourInstanceName.getData();

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

另外我推荐你the ticket onchange 事件和监控编辑器中的变化。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：

您好，配置文件，此答案显示在评论提要中，请考虑添加简要说明，说明如何解决此问题。

【解决方案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

【讨论】：

【解决方案5】：

你可以用这个：

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

【讨论】：