I have used CKEditor4 earlier and have managed writing blur event handler for it. However I am not able to understand how should I do it for CKEditor5
Here is the code I have written for CKEditor5 to capture the Blur even of it, but i do not get any alert message.
HTML
<div id='editor'></textarea>
javascript code -
ClassicEditor
.create( document.querySelector( '#editor' ), {} )
.then( editor => {
editor.on("blur", function(){alert("hello world");});
} )
.catch( err => {
console.error( err.stack );
} );
Earlier when I used CKEditor4, my code was as follows and it worked fine for CKEditor4
HTML
<textarea id="editor"></textarea>
javascript
CKEDITOR.replace('editor', {});
CKEDITOR.instances.editor.on('blur', function () {alert("Hello World");});
In each of the cases above, my CKEditor loads on my page fine.
I read their documentation, but couldn't understand how to implement it.
I found a solution on stackover flow, below link -
Detect when text has changed AND editor has lost focus in CKEditor 5
This is precisely what i wanted to do
heres' the solution in there
editor.ui.focusTracker.on( 'change:isFocused', ( evt, name, isFocused ) => {
if ( !isFocused ) {
// Do whatever you want with current editor data:
console.log( editor.getData() );
}
} );
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With