如何查看CKEditor5的内容变化答案

【问题标题】：How to watch the content change of CKEditor5如何查看CKEditor5的内容变化
【发布时间】：2020-12-31 10:09:16
【问题描述】：

所以我正在尝试将 CKEditor5 实现到我的 Vuejs 应用程序中，我正在像这样实现

mounted() {
  ClassicEditor.create( document.querySelector( '#editor' ) )
    .then( editor => {
        window.editor = editor;
    } )
    .catch( error => {
       console.error( 'There was a problem initializing the editor.', error );
    } );
}

在模板中

<div id="editor">
    </div>

当我尝试实现 v-model 时，它说不支持 div，所以我改为 textarea 但它似乎也不起作用。如何查看我的 ckeditor 更改中的每个内容？我知道内容可以通过 editor.getData() 获取。但我不能这样做

watch: {
   editor.getData() {
   }
}

注意到由于我的自定义构建错误，我不想像下面那样实现我的 CKEditor

<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>

感谢大家阅读。非常感谢您的回答

【问题讨论】：

标签： javascript vue.js ckeditor ckeditor5

【解决方案1】：

我使用 ClassicEditor 并像这样处理数据更改：

1 - 渲染的文本区域

<textarea id="editor" placeholder="Input a text..."></textarea>

2 - 创建一个函数来构造和处理变化

ClassicEditor
            .create(document.querySelector('#editor'), {
                initialData: "I am an initial text"
            })
            .then(editor => {
                editor.model.document.on('change:data', () => {
                    const data = editor.getData();
// Do somethign here
                });
            })
            .catch(error => {
                console.error(error);
            });

【讨论】：

非常感谢您的快速回答哈哈。你拯救了我的一天。