How to get the contents of ckeditor on change?

Question

I have the following code for detecting changes on the ckeditor surface.

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

I would like to get the contents of editor on change for counting the words in it. How can I reach it using CKEDITOR.instances?

Answer 1

The only correct way to retrieve contents of the editor is:

CKEDITOR.instances.yourInstanceName.getData();

You can also try this.on( 'key', function() { ... } ); because editor fires key events.

Additionally I recommend you the ticket regarding onchange event and monitoring changes in the editor.

And the last but not least: The wordcount plugin which has already been implemented and does your job ;)

Answer 2

For version 5 you use editor.model.document.on('change:data', ...).

So much like:

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

Read the docs: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/basic-api.html#listening-to-changes