Question

我的页面有一个textarea，它是一个CKEditor实例。当用户离开textarea时，内容应该保存。我遇到的问题是当我尝试从工具栏中选择一个下拉项时触发'blur'事件（例如，如果我突出显示文本区域然后尝试从下拉列表中应用格式），那么如果我使用此功能，内容保存（在应用样式之前），然后编辑器被销毁。

我的代码如下：

// 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();
});

如何确保只有在用户离开编辑器时才能使用模糊功能，而不是从工具栏中选择菜单时？

Answer 1

这是我提出的解决方案。

我做的是在做模糊之前检查鼠标是否在编辑区域之外。如果它不在编辑器区域之外，则意味着模糊事件来自对话框打开或下拉列表，因此我什么都不做。

它不在jquery中，因为我的项目使用ADF，但我认为你可以轻松地将代码转换为jquery。

这是代码：

//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);

我希望它可以帮到你。

Answer 2

我假设您使用的是CKEditor 3.6.x.您所观察到的实际上是一个错误。它已在CKEditor 4 beta中修复。您还可以查看latest nightly build以查看它现在正在运行。

对不起，我们正在尽力而为;）

当我选择工具栏下拉列表时，我的CKEditor实例正在获取'模糊'事件

2 个答案: