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

Question

如何在ckeditor5中收听"输入"事件？我希望能够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!' );
} );

正如本次活动的文件所述:

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

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

Answer 2

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

请注意:

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)中引入,因此您需要使用当前的主分支来使用它.