检测文本何时更改并且编辑器在 CKEditor 5 中失去焦点

Question

我正在尝试在 CKEditor 5 中实现自动保存功能，只有在进行了更改并且编辑器失去焦点后才会进行保存。

我怎么能这样做？文档对我来说非常混乱。

这是我得到的最接近的：

function onChange(el,editor) {
    editor.document.once('change',function(evt,data) {
        $(el).one('blur',function() {
            saveFunction();
            onChange(el,editor);
        });
    });
}

onChange(el,editor);

我的解决方案的问题是每当 CKEditor 调出模态时都会触发模糊事件。

Answer 1

要跟踪编辑器 ui的焦点元素，您可以使用focusTracker（在 上可用editor.ui.focusTracker）。它跟踪当前关注的编辑器的各个部分。

该focusTracker.isFocused是true每当任何编辑的已注册的组件都集中。对于经典编辑器构建，焦点元素可能是以下元素之一：

• 编辑区，
• 工具栏，
• 上下文工具栏。

editor.ui.focusTracker.on( 'change:isFocused', ( evt, name, isFocused ) => {
    if ( !isFocused ) {
        // Do whatever you want with current editor data:
        console.log( editor.getData() );
    }
} );

Answer 2

基于 Jodators 的回答，满足 Adams 第二个标准（数据已更改）：

var editor_changed = false;

editor.model.document.on('change:data', () => { editor_changed = true; });

editor.ui.focusTracker.on('change:isFocused', (evt, name, isFocused) => {
  if(!isFocused && editor_changed) {
    editor_changed = false;
    console.log(editor.getData());
  }
} );