CODEWITHSUNDEEP
javascriptjqueryckeditor
Simple Code
Simple Code

Reputation: 2574

Not able to attach event handler to ClassicEditor

I am using CKEditor to allow the user to style post message and I am using the following javascript code to configure my ClassicEditor:

ClassicEditor
.create($("#post-message")[0], {
    language: $("html").attr("lang"),
    alignment: {
        options: ['left', 'right']
    },
    toolbar: ["undo", "redo", "bold", "italic", "blockQuote", "link", "numberedList", "bulletedList"],
    autoParagraph : false
})
.then(editor => {
    myEditor = editor;
    myEditor.model.document.on('change', (event) => {
        $("#post-message").val(myEditor.getData());
        if (validatePostMessage() == false) {
            $(".ck-content").css("border-color", "red");
        }
        else {
            $(".ck-content").css("border-color", "rgb(196, 196, 196)")
        }

    });
     //this one not working
    myEditor.model.document.on('blur', (event) => {
        alert("hi");

    });
})
.catch(error => {
    console.error(error);
});

The above code working when change event occurs but blur event not working.

<textarea type="text"
  class="form-control"
  maxlength="2000"
  id="post-message"
  name="post-message">
</textarea>

My question why blur event handler not working when my editor loses focus?

PS:

I am using the following version:

https://cdn.ckeditor.com/ckeditor5/12.3.1/classic/ckeditor.js

Upvotes: 0

Views: 757

Answers (1)

Azeem
Azeem

Reputation: 14627

You can use focus tracking in the editor to determine if it is a focus or blur.

Example from documentation:

editor.editing.view.document.on('change:isFocused', ( evt, data, isFocused ) => {
    console.log( `View document is focused: ${ isFocused }.` );
});

So, for your use-case, it would be:

editor.editing.view.document.on('change:isFocused', ( evt, data, isFocused ) => {
    if ( isFocused == false ) // blur
    {
        alert('blur');
    }
});

Upvotes: 1

Related Questions