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 badges1 Answer
Reset to default 10The 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.