如何观看CKEditor5的内容更改

Question

所以我试图将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>

谢谢你们的阅读。非常感谢你的回答

Answer 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);
});