Javascript 在CKEditor 5中检测文本何时更改以及编辑器何时失去焦点

我正在尝试在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调出一个模式时，就会触发模糊事件。

要跟踪的聚焦元素，可以使用（可在

编辑器.ui.focusTracker

上找到）。它跟踪编辑器中当前关注的各个部分

每当编辑器的任何注册组件被聚焦时，都是

true

。对于以下情况，重点元素可能是：

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

editor.ui.focusTracker.on（'change:isFocused'，（evt，name，isFocused）=>{
如果（！isFocused）{
//使用当前编辑器数据执行任何操作：
log（editor.getData（））；
}
} );

基于jodators回答的第二个临界点（数据已更改）：

---

这里有一个基于@Peter和@jodator的答案的完整示例。它使用CKEditor 5内联编辑器。正如亚当·库克（Adam Cook）在他的问题中提到的那样，文件并不十分清楚

<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>

Lorem ipsum dolor sit amet。


所有人都能清楚地看到。

var text_changed=false；
内联编辑
.create（document.querySelector（“.editor”）{
})
.然后（编辑=>{
window.editor=编辑器；
detectTextChanges（编辑器）；
detectFocusOut（编辑）；
})
.catch（错误=>{
控制台错误（error）；
});
函数detectFocusOut（编辑器）{
editor.ui.focusTracker.on（'change:isFocused'，（evt，name，isFocused）=>{
如果（！isFocused&&text_已更改）{
text_changed=false；
log（editor.getData（））；
}
});
}
函数detectTextChanges（编辑器）{
editor.model.document.on（'change:data'，（）=>{
text_changed=true；
});
}

这将解决模态问题。谢谢不过，当它满足所有标准时，我会接受这个答案。这样一来，发现这些的人就不必去想其他的了。保存的条件是：1。内容必须已更改，并且2。编辑失去了焦点。谢谢彼得。我不再参与那个项目了，所以我无法证实这一点。然而，如果人们开始评论这是有效的，我会将其标记为正确的。

<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>