在CKEditor 5中更改内容时监听事件触发 [英] Listen to event fired when the content has changed in CKEditor 5

问题描述

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

How can I listen to the "input" event in ckeditor5 ? I would like to be able to use Observables like this:

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

到目前为止，我已经能够收听到类似这样的事件：

So far, I've been able to listen to some events like this:

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

但是我没有找到一旦更改数据就会触发的事件的名称编辑。我尝试了更改，但仅在编辑器获得焦点或失去焦点时才会触发。

But I don't find the name of the event that would be fired as soon as data changed in the editor. I tried "change" but it only fires when the editor get or lost focus.

推荐答案

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

可能可能需要的是 Document＃change：data 事件由编辑者的文档触发。

Since CKEditor5 v11.0.0 (since 21 July 2018)

What you probably need is the Document#change:data event fired by editor's document.

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

当文档以在编辑器数据中可见的方式更改时，将触发此事件。还有一组更改，例如选择位置更改，标记更改，这些更改不会影响 editor.getData（）的结果。要收听所有这些更改，可以使用更宽的 Document＃change 事件：

This event is fired when the document changes in such a way which is "visible" in the editor data. There's also a group of changes, like selection position changes, marker changes which do not affect the result of editor.getData(). To listen to all these changes, you can use a wider Document#change event:

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

CKEditor5 v11.0.0之前的版本

您可能可能需要的是 change 事件由编辑者的文档触发。

Prior to CKEditor5 v11.0.0

What you probably need is a change event fired by editor's document.

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

此事件的文档显示：

在每个 enqueueChange（）块或最外面的 change（）块已执行，并且在该块执行期间更改了文档。

Fired after each enqueueChange() block or the outermost change() block was executed and the document was changed during that block's execution.

此事件将涉及的更改包括：

The changes which this event will cover include:

• 文档结构更改，


• 选择更改


• 标记更改。

如果要通知您有关所有这些更改的信息，只需听这样的事件即可：

If you want to be notified about all these changes, then simply listen to this event like this:

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

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

If, however, you only want to be notified about structure changes, then check whether the differ contains any changes:

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

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

The last code snippet is useful when implementing features like auto-save.

这篇关于在CKEditor 5中更改内容时监听事件触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！