javascript - 检测文本何时更改且编辑器在 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 2nd 标准（数据已更改）：

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

Answer 3

这是一个基于@Peter 和@jodator 答案的完整示例。它使用 CKEditor 5 内联编辑器。正如亚当库克在他的问题中提到的那样，文档不是很清楚。

<div id="textblock1" class="editor">
    <p>
        Lorem ipsum dolor sit amet.
    </p>
</div>

<div id="textblock2" class="editor">
    <p>
        Sed ut perspiciatis unde omnis iste natus.
    </p>
</div>

<script src="https://cdn.ckeditor.com/ckeditor5/17.0.0/inline/ckeditor.js"></script>

<script>
    var text_changed = false;

    InlineEditor
        .create(document.querySelector('.editor'), {
        })
        .then(editor => {
            window.editor = editor;

            detectTextChanges(editor);
            detectFocusOut(editor);
        })
        .catch(error => {
            console.error(error);
        });

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

    function detectTextChanges(editor) {
        editor.model.document.on('change:data', () => {
            text_changed = true;
        });
    }
</script>