Listen to event triggered when content has been modified in CKEditor 5

Question

How can I listen to input event in ckeditor5 ? I would like to be able to use Observables as follows:

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

So far, I have been able to listen to events such as this:

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

But I do not find the name of the event that will be fired as soon as the data is changed in the editor. I tried to "change", but it only works when the editor gains or loses focus.

Answer 1

You may need to change event issued by the editor.

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

As the documentation for this event says:

It worked after each enqueueChange() block or external change() block and the document was changed during the execution of this block.

Changes that this event will cover include:

• changes in the structure of the document,
• change of choice
• is changing.

If you want to be notified of all these changes, just listen to this event as follows:

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

If, however, you only want to receive notifications of structural changes, then check to see if differ contains any changes:

  model.document.on( 'change', () => { if ( model.document.differ.getChanges().length > 0 ) { console.log( 'The Document has changed!' ); } } ); 

The last piece of code is useful when implementing features such as auto save.

Answer 2

First of all, I see that you are using Observable.fromEvent , which seems to be part of RxJS and works with jQuery events. CKEditor 5 does not use RxJS and jQuery. It uses user events and user observables , which are something different from the observable that you want to use.

So, note that:

 Observable.fromEvent(this.editor.editing.view, 'selectionChangeDone'); 

It is not a proper way to listen to the event and most likely only works because of some duck input .

The correct way to listen for CKE5 events is:

 this.editor.editing.view.on( 'selectionChangeDone', () => { /*...*/ } ); 

Secondly, "enter" is not an event, but a command. If you want to listen to this command, you can do:

 this.editor.commands.get( 'input' ).on( 'execute', ( evt, args ) => { console.log( evt, args ); } ); 

However, this is a very fresh API, which will be introduced in the next version of ckeditor-core (0.9.0), so to use it you need to use the current leading branch.