How to watch the content change of CKEditor5

Question

so im trying to implement CKEditor5 to my Vuejs application im implmenting like

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

And in template

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

When i tries to implement v-model its said doesnt support to div, so i changed to textarea but it doesnt seems to work too. How can i watch for each content in my ckeditor changes? I know that the content can be get by editor.getData(). But i cant do like this

watch: {
   editor.getData() {
   }
}

Noted that i dont want to implement my CKEditor like below due to my custom build error

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

Thanks for reading guys. Really appreciated your answer

Answer 1

I use ClassicEditor and I handle data change like this :

1 - Rendered Textarea

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

2 - Create a function to construct and handle change

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