ssougnez ssougnez - 2 months ago 10
React JSX Question

Listen to event fired when the content has changed in ckeditor 5

How can I listen to the "input" event in ckeditor5 ? I would like to be able to use

like this:

Observable.fromEvent(this.editor, "input").debounceTime(250).subscribe(() => {});

So far, I've been able to listen to some events like this:

Observable.fromEvent(this.editor.editing.view, 'selectionChangeDone').subscribe(() => { });

But I don't find the name of the event that would be fired as soon as data changed in the editor. I tried "change" but it only fires when the editor get or lost focus.

Answer Source

What you probably need is a changesDone event fired by editor's document.

editor.document.on( 'changesDone', () => {
    console.log( 'The Document has changed!' );
} );

Just note that it will also fire when any change occurs in the document, which includes selection change etc. To get more precise information, listen to the change event:

editor.document.on( 'change', ( evt, data ) => {
    console.log( evt, data );
} );