14

How can I listen to the "input" event in ckeditor5 ? I would like to be able to use Observables 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.

Reinmar
  • 21,729
  • 4
  • 67
  • 78
ssougnez
  • 5,315
  • 11
  • 46
  • 79

2 Answers2

27

Since CKEditor5 v11.0.0 (since 21 July 2018)

What you probably need is the Document#change:data event fired by editor's document.

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

This event is fired when the document changes in such a way which is "visible" in the editor data. There's also a group of changes, like selection position changes, marker changes which do not affect the result of editor.getData(). To listen to all these changes, you can use a wider Document#change event:

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

Prior to CKEditor5 v11.0.0

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

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

As the documentation of this event says:

Fired after each enqueueChange() block or the outermost change() block was executed and the document was changed during that block's execution.

The changes which this event will cover include:

  • document structure changes,
  • selection changes,
  • marker changes.

If you want to be notified about all these changes, then simply listen to this event like this:

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

If, however, you only want to be notified about structure changes, then check whether the differ contains any changes:

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

The last code snippet is useful when implementing features like auto-save.

Reinmar
  • 21,729
  • 4
  • 67
  • 78
oleq
  • 15,697
  • 1
  • 38
  • 65
  • Listening the "change" event on "document" instead of "editing.view" works like a charm, thanks ;-) – ssougnez Jul 17 '17 at 13:38
  • 1
    Just FYI, v5 is nothing like v4 in terms of data storage and manipulation. We completely decoupled the view (in short `editor.editing.view`) layer from the document model (`editor.document`). Documentation and samples will arrive soon. Stay tuned! – oleq Jul 17 '17 at 13:41
  • We rewrote the answer to update it once 1.0.0-beta.1 was released. – Reinmar Mar 20 '18 at 14:54
  • 1
    If you want to listen only for structural changes, it's not possible to do this: `model.document.on( 'change:data', () => console.log( 'The data has changed!' ));` See the docs: https://docs.ckeditor.com/ckeditor5/latest/api/module_engine_model_document-Document.html#event-change – Dmitri Pisarev Jun 25 '18 at 13:44
5

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

So note that:

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

is not a proper way of listening to the event and works most probably only because of some duck typing.

The proper way of listening on CKE5 events is:

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

Second, 'input' is not an event but a command. If you want to listen in this command execution 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 you need to use the current master branch to use it.

Piotr Jasiun
  • 996
  • 5
  • 8