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

我怎样才能监听“输入”事件ckeditor5？我希望能够使用Observables像这样：

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

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

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

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

自 CKEditor5 v11.0.0 起（自 2018 年 7 月 21 日起）

你什么probably需要的是Document#change:data https://docs.ckeditor.com/ckeditor5/latest/api/module_engine_model_document-Document.html#event-change:data由编辑器的文档触发的事件。

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

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

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

CKEditor5 v11.0.0 之前的版本

你什么probably需要是一个change https://docs.ckeditor.com/ckeditor5/latest/api/module_engine_model_document-Document.html#event-change由编辑器的文档触发的事件。

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

正如该事件的文档所述：

每次之后都被解雇enqueueChange() block https://docs.ckeditor.com/ckeditor5/latest/api/module_engine_model_model-Model.html#function-enqueueChange或最外层change() block https://docs.ckeditor.com/ckeditor5/latest/api/module_engine_model_model-Model.html#function-change被执行并且文档在该块的执行期间被更改。

本次活动将涵盖的变化包括：

• 文档结构变化，
• 选择变化，
• 标记发生变化。

如果您想收到有关所有这些更改的通知，只需像这样监听此事件：

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

但是，如果您只想收到有关结构更改的通知，请检查是否differ https://docs.ckeditor.com/ckeditor5/latest/api/module_engine_model_differ-Differ.html包含任何更改：

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

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