![](/img/trans.png)
[英]Fire onChange when a changed field has not lost focus, but form was saved
[英]Detect when text has changed AND editor has lost focus in 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 (在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() );
}
} );
基于 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());
}
} );
这是一个基于@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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.