Question

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

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

这是我最接近的：

>>> from operator import itemgetter
>>> any(var['name'] == k for k in map(itemgetter('name'),var_list))
>>> True

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

Answer 1

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

只要编辑了任何编辑器的注册组件，focusTracker.isFocused就是true。对于classic editor build，焦点元素可能是以下之一：

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

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

根据陪审员的回答，亚当斯（Adams）第2条评论已满（数据已更改）：

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内联编辑器。正如亚当·库克（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>

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

3 个答案: