0

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

我的代码如下：

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

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

4

2 回答 2

2

这是我想出的解决方案。

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

它不在 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);

我希望它可以帮助你。

于 2012-11-07T17:23:50.590 回答
1

我假设您使用的是 CKEditor 3.6.x。您所观察到的实际上是一个错误。它已在CKEditor 4 beta中修复。您还可以检查最新的夜间版本以查看它现在是否正常工作。

抱歉，我们正在尽力而为 ;)

于 2012-10-06T22:51:00.110 回答