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

admin管理员组

文章数量:1315792

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?

• javascript
• ckeditor
• ckeditor5

Share Improve this question Follow asked Apr 5, 2018 at 3:22 Michael BatesMichael Bates 1,93422 gold badges3030 silver badges4343 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: 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.

本文标签： javascriptHow to listen to focus event in CKEditor 5Stack Overflow