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

Question

我想听 CKEditor 5 中的焦点事件。

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

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

编辑器已成功创建，但未调用回调。

有任何想法吗？

Answer 1

为此目的，编辑器附带了一个FocusTracker（和 observable属性）：#isFocused

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

请注意，只要editor.ui.focusTracker.isFocused任何UI都有焦点，包括可编辑的，还包括工具栏、浮动面板等。true

要确定可编辑的焦点，即当插入符号闪烁并且可以键入时，请改用此侦听器：

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

将一个侦听器放在另一个侦听器旁边，并使用编辑器和 UI 来查看差异。