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

Posted 2023-02-16

【中文标题】监听 CKEditor 5 中内容更改时触发的事件

【英文标题】：Listen to event fired when the content has changed in CKEditor 5

【发布时间】：2017-12-21 08:07:21

【问题描述】：

如何在 ckeditor5 中收听“输入”事件？我希望能够像这样使用Observables：

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

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

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

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

【参考方案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!' );
 );

正如本次活动的文档所述：

在每个enqueueChange() block 或最外层的change() block 被执行并且在该块的执行期间文档被更改后触发。

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

文档结构更改， 选择更改， 标记更改。

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

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

但是，如果您只想收到有关结构更改的通知，请检查 differ 是否包含任何更改：

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

最后一个代码 sn-p 在实现自动保存等功能时很有用。

【讨论】：

在“document”而不是“editing.view”上监听“change”事件就像一个魅力，谢谢;-)

仅供参考，v5 在数据存储和操作方面与 v4 完全不同。我们将视图层（简称editor.editing.view）与文档模型（editor.document）完全分离。文档和样品将很快到达。敬请期待！

我们重写了答案，以便在 1.0.0-beta.1 发布后对其进行更新。

如果你只想监听结构变化，这是不可能的：model.document.on( 'change:data', () => console.log( 'The data has changed!' )); 查看文档：docs.ckeditor.com/ckeditor5/latest/api/…

【参考方案2】：

首先，我看到您正在使用Observable.fromEvent，它似乎是 RxJS 的一部分并适用于 jQuery 事件。 CKEditor 5 不使用 RxJS 也不使用 jQuery。它使用了 custom events 和 custom observables，这与你想要使用的 observable 不同。

所以请注意：

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

不是收听事件的正确方式，很可能只是因为一些duck typing。

监听 CKE5 事件的正确方法是：

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

其次，“输入”不是事件而是命令。如果你想在这个命令执行中收听你可以这样做：

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

不过，这是一个很新鲜的API，会在ckeditor-core(0.9.0)的下一个版本中引入，所以需要使用当前的master分支才能使用。

【讨论】：

感谢您的精确。 oleq 提供的答案更适合我 ;-)