Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CKEditor5, how do I write a Blur event handler in my javascript function

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.

like image 908
Avdhut Vaidya Avatar asked May 12 '26 07:05

Avdhut Vaidya


1 Answers

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() );
    }
} );
like image 103
Avdhut Vaidya Avatar answered May 13 '26 21:05

Avdhut Vaidya



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!