reactjs - 监听 CKEditor 5 中内容更改时触发的事件

Question

如何监听ckeditor5中的“input”事件？我希望能够像这样使用 Observables:

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

到目前为止，我已经能够监听一些像这样的事件:

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

但是我没有找到编辑器中数据更改后立即触发的事件的名称。我尝试了“更改”，但它仅在编辑器获得或失去焦点时才会触发。

Answer 1

自 CKEditor5 v11.0.0 起(自 2018 年 7 月 21 日起)

您可能需要的是 Document#change:data由编辑器的文档触发的事件。

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

当文档以编辑器数据中“可见”的方式发生更改时，会触发此事件。还有一组更改，例如选择位置更改、标记更改，这些更改不会影响 editor.getData() 的结果。要聆听所有这些变化，您可以使用更广泛的 Document#change事件:

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

CKEditor5 v11.0.0 之前的版本

您可能需要的是 change由编辑器的文档触发的事件。

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

正如该事件的文档所述:

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

最后一个代码片段在实现自动保存等功能时非常有用。