如何在CKEditor 5中收听焦点事件 [英] How to listen to focus event in CKEditor 5

问题描述

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

I'd like to listen to the focus event in CKEditor 5.

我以为这样的事情会起作用，但是永远不会调用该回调:

I thought something like this would work but the callback is never called:

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

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

The editor is successfully created but the callback is not called.

有什么想法吗?

推荐答案

编辑器带有 FocusTracker (以及可观察的

The editor comes with a FocusTracker (and the observable #isFocused property) for that purpose:

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

请注意，只要任何用户界面具有焦点， editor.ui.focusTracker.isFocused 就是 true ，其中包括可编辑的内容以及工具栏，浮动面板等

Note that editor.ui.focusTracker.isFocused is true as long as any UI has focus, which includes the editable but also the toolbar, floating panels, etc.

确定焦点，即，当插入符号闪烁并可以键入时，请改用以下监听器:

To determine the focus of the editable, i.e. when the caret is blinking and typing is possible, use this listener instead:

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

将一个侦听器放置在另一个侦听器旁边，并使用编辑器和UI来查看区别.

Place one listener next to the other and play with the editor and the UI to see the difference.

这篇关于如何在CKEditor 5中收听焦点事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！