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?

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?

• javascript
• plugins
• ckeditor

5 Answers 5

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

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./docs/ckeditor5/latest/builds/guides/integration/basic-api.html#listening-to-changes

There is an "onChange" plugin from @AlfonsoML in the plugins list:
onChange

It covers a lot more than just "keyUp". You can read more on his blog, where he describes different events that are captured:
onChange event for CKEditor

Try this:

    CKEDITOR.instances["CKEditor"].on('change', function() { 
        console.log(this.getData());
    });

You can use this:

<script>   
    CKEDITOR.replace( 'editor1' );
    CKEDITOR.instances.editor1.on("change", function() {
        $("#content-val").html(this.getData())//show content inside #content-val div
    });
</script>