收聽CKEditor中內容變化時觸發的事件5

Question

如何在ckeditor5中收聽「輸入」事件？我想能夠使用Observables這樣的：

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

到目前爲止，我已經能夠聽一些這樣的活動：

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

但我不覺得名字只要數據在編輯器中更改，就會被解僱。我嘗試了「改變」，但只有在編輯得到或失去焦點時纔會觸發。

Answer 1

你可能需要的是changesDone事件由編輯文檔觸發。

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

只要注意，它也將在任何改變的文件，其中包括選擇變化等。爲了獲得更精確的信息，在火災發生時，聽change事件：

editor.document.on('change', (evt, data) => { 
    console.log(evt, data); 
}); 

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',() => { /*...*/ }); 

其次，「輸入」不是一個事件，而是一個命令。如果你想在這個命令執行傾聽你可以這樣做：

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

然而，這是一個很新鮮的API，這將在ckeditor-core（0.9.0）的下一個版本推出，所以你需要使用當前主分支使用它。