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

问题

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?

回答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 ;)

回答2:

Here's the solution I came up with.

What I do is I check if the mouse is outside the editor area before doing the blur. If it's not outside the editor area it means the blur event comes from a dialog opening or a dropdownlist so I do nothing.

It's not in jquery because my project use ADF but I think you can easely convert the code to jquery.

here's the code :

//onBlur listener
MyComponent._handleBlur = function (event)
{
    var editor = event.editor;

    //blur only if the mouse is outside the ckeditor container.
    if(MyComponent._isMouseOutsideElement(event.editor.container.$))
    {
        editor.__hasFocus = false;
        //do your stuff
    }
}

//onFocus listener
MyComponent._handleFocus = function (event)
{
   var editor = event.editor;

   //focus only if it doesn't already have the focus.
   if(!editor.__hasFocus)
    {
        editor.__hasFocus = true;
        //do your stuff
    }
}

//mousemove listener that saves the mouse position.
MyComponent._onMouseMove = function(event)
{
    var posx = 0;
    var posy = 0;

    if (event.pageX || event.pageY)     
    {
        posx = event.pageX;
        posy = event.pageY;
    }
    else if (event.clientX || event.clientY)     
    {
        posx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        posy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    MyComponent._mousePosition = [posx, posy];
}

//find the absolute position of an element in a document
MyComponent._getElementPosition = function (element) 
{
    var x = 0; 
    var y = 0;
    do 
    {
        x += element.offsetLeft;
        y += element.offsetTop;
        element = element.offsetParent
    }
    while (element);

    return [x,y];
}

//indicate if the mouse is outside the editor
MyComponent._isMouseOutsideElement = function (element) 
{
    var positionEditor = MyComponent._getElementPosition(element)

    var top = positionEditor[1];
    var bottom = top + parseInt(window.getComputedStyle(element,null).height);
    var left = positionEditor[0];
    var right = left + parseInt(window.getComputedStyle(element,null).width);

    var mouseX = MyComponent._mousePosition[0];
    var mouseY = MyComponent._mousePosition[1];

    return mouseX <= left || mouseX >= right || mouseY <= top || mouseY >= bottom;
}



document.onmousemove = MyComponent._onMouseMove;

editor.on('focus', MyComponent._handleFocus);
editor.on('blur', MyComponent._handleBlur);

I hope it can help you.

来源：https://stackoverflow.com/questions/12707184/my-ckeditor-instance-is-getting-the-blur-event-when-i-select-a-toolbar-dropdow

标签

jquery

ckeditor