檢測文本何時更改並且編輯器在 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上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>