最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to listen to focus event in CKEditor 5 - Stack Overflow

programmeradmin3浏览0评论

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.

Any ideas?

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.

Any ideas?

Share Improve this question asked Apr 5, 2018 at 3:22 Michael BatesMichael Bates 1,9342 gold badges30 silver badges43 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 10

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

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

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 );
} );

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

发布评论

评论列表(0)

  1. 暂无评论