12

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

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

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

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

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

4

2 回答 2

28

自 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()块或最外层change()块并且在该块执行期间更改文档后触发。

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

  • 文件结构变化，
  • 选择变化，
  • 标记的变化。

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

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

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

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

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

于 2017-07-17T13:37:36.030 回答
5

首先，我看到您正在使用Observable.fromEvent它似乎是 RxJS 的一部分并与 jQuery 事件一起使用。CKEditor 5 不使用 RxJS 也不使用 jQuery。它使用自定义事件和自定义可观察对象，它们与您想要使用的可观察对象不同。

所以请注意：

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

不是收听事件的正确方法，并且很可能只是因为一些鸭子打字而起作用。

监听 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分支才能使用。

于 2017-07-17T13:47:01.920 回答