Question

我如何倾听＆＃34;输入＆＃34; ckeditor5 中的活动？我希望能够像这样使用Observables：

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

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

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

但是，一旦数据在编辑器中发生变化，我就找不到会被触发的事件的名称。我试过＆＃34;改变＆＃34;但它只会在编辑失去焦点时触发。

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

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

Answer 2

首先，我看到你正在使用Observable.fromEvent，它似乎是RxJS的一部分，并且可以使用jQuery事件。 CKEditor 5不使用RxJS也不使用jQuery。它使用的custom events和custom observables与您想要使用的可观察内容不同。

请注意：

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

不是一种正确的倾听事件的方式，并且最有可能仅仅是因为某些duck typing。

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

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

其次，＆＃39;输入＆＃39;不是一个事件，而是一个命令。如果你想听这个命令执行，你可以这样做：

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

但是，这是一个非常新的API，将在下一版ckeditor-core（0.9.0）中引入，因此您需要使用当前的主分支来使用它。

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

2 个答案:

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

在CKEditor5 v11.0.0之前