如何查看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);
            });

如何查看CKEditor5的内容变化

How to watch the content change of CKEditor5

javascript

vue.js

ckeditor

ckeditor5