CKEditor 5 on blur - Javascript

CKEditor 5 is a powerful wysiwyg editor for creating and editing content for web applications. One important feature is the ability to attach an event listener to the on blur event handler. This handler is triggered when the editor loses focus.

What is on blur?

on blur is a JavaScript event that is triggered when an element loses focus. In the context of CKEditor 5, this happens when the user clicks outside the editor after editing the content.

Attaching the on blur Event Listener

Attaching the on blur event listener to CKEditor 5 is straightforward. You can use the editor's on method to register the event listener. Here is how you can do it:

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        // Attach the on blur event listener
        editor.editing.view.document.on( 'blur', () => {
            console.log( 'Editor lost focus' );
        } );
    } );

Code Explanation

• We create a new CKEditor 5 instance in the create() method of ClassicEditor class.
• We retrieve the editor's dom element by passing its id to the document.querySelector() method.
• We then use the editor.editing.view.document.on() method to register the on blur event handler.
• In our example, we simply log to the console when the editor loses focus, but you can use this event to trigger any other function or event.

Conclusion

Using the on blur event listener in CKEditor 5 is a great way to handle events when the editor loses focus. This can help ensure that any changes made by the user are saved before they leave the editor.