javascript - 如何在 CKEditor 5 中收听焦点事件

Question

我想在 CKEditor 5 中收听焦点事件。

我认为这样的事情会起作用，但从未调用过回调:

document.querySelector("#editable");
ClassicEditor.create(el).then(editor => {
    editor.on('focus', () => {
        console.log("Focused");
    });
});

编辑器创建成功，但没有调用回调。

有什么想法吗？

Answer 1

编辑器附带了一个 FocusTracker(以及可观察的 #isFocused 属性):

editor.ui.focusTracker.on( 'change:isFocused', ( evt, name, value ) => {
    console.log( 'isFocused = ', value );
} );

注意 editor.ui.focusTracker.isFocused 是 true 只要 any UI 有焦点，包括可编辑的，也包括工具栏、 float 面板等。

确定focus的可编辑的，即当插入符号闪烁并且可以输入时，请改用此监听器:

editor.editing.view.document.on( 'change:isFocused', ( evt, name, value ) => {
    console.log( 'editable isFocused =', value );
} );

将一个监听器放在另一个旁边，并与编辑器和 UI 一起玩，看看有什么不同。