0

私のページには、CKEditorインスタンスであるテキストエリアがあります。ユーザーがテキストエリアを離れると、コンテンツが保存されます。私が抱えている問題は、ツールバーからドロップダウンアイテムを選択しようとすると（たとえば、テキストの領域を強調表示してからドロップダウンからフォーマットを適用しようとした場合）、「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();
});

ユーザーがツールバーからメニューを選択したときではなく、ユーザーがエディターを離れたときにのみぼかし機能に到達するようにするにはどうすればよいですか？

4

2 に答える 2

2

これが私が思いついた解決策です。

ぼかしを行う前に、マウスがエディタ領域の外にあるかどうかを確認します。エディター領域の外にない場合は、ぼかしイベントがダイアログの開口部またはドロップダウンリストから発生していることを意味するため、何もしません。

私のプロジェクトはADFを使用しているため、jqueryには含まれていませんが、コードを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 に答える