My CKEditor instance is getting the 'blur' event when I select a Toolbar dropdown

Question

My page has a textarea which is a CKEditor instance. When the user leaves the textarea, the content should save. The problem I'm having is that the 'blur' event is being triggered when I try to select a dropdown item from the toolbar (eg if I highlight an area of text and then try to apply a format from the dropdown), so if I use this functionality, the content saves (before the style is applied) and then the editor is destroyed.

My code is as follows:

// Initially, colName is a variable which stores the name of the column being edited
// The textarea id is editText_colName
$('#editText_' + colName).ckeditor({
            toolbar : 'Basic',
            format_tags : 'h1;h2;h3;p',
            resize_enabled : false
});
var editor = $('#editText_' + colName).ckeditorGet();
editor.on('blur', function() {
    // Get content of text editor, and save
    var data = $('#editText_' + colName).val();
    // ... save data ...
    // ... on success, do the following ...
    editor.destroy();
    $('#editText_' + colName).remove();
});

How can I make sure that the blur function is only reached when the user leaves the editor, and not when they select a menu from the toolbar?

Answer 1

I assume that you're using CKEditor 3.6.x. What you're observing is actually a bug. It has been fixed in CKEditor 4 beta. You can also check the latest nightly build to see that it's working now.

Sorry for that, we're doing our best ;)