如何在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只要任何UI具有焦点,其中包括编辑,而且工具栏,浮动面板,等等.

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

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

将一个侦听器放在另一个旁边,然后使用编辑器和UI来查看差异.