2

Web アプリケーションで dhtml (midas) エディターを html エディターとして使用しています。この html エディターでフォーカスされたカーソルをマウスに追従させたいのですが、それを行う方法はありますか?

追加された例: テキストエリア内のカーソルをマウスに追従させたいので、テキストエリアに大きなテキストがあり、マウスでその上を移動している場合、カーソル (テキスト カーソル) は次のようにマウスに追従する必要があります。

「これは例です|サンプルテキストです」-マウスが「例」単語の上にあり、xとaの間にある場合、テキストカーソル（|）はそこにフォーカスする必要がありますが、マウスを「テキスト」カーソル|に移動すると、そこにフォーカスする必要があります。マウスが現在置かれている文字の間にある必要があります。

4

3 に答える 3

2

Ext.util.TextMetrics を使用して解決策を見つけました。最初にエディター内のすべての文字の位置を取得し、それをマウス カーソルの位置と比較してから、charNum 配列の特定の文字に基づいて midas の選択を更新します。

htmlEditor.getEl().on('mousemove', function(e)
{   
    var charNum = {},
        text = htmlEditor.getValue(),
        fWidth = htmlEditor.getWidth();

    var textMetrics = new Ext.util.TextMetrics(htmlEditor.getEl(), htmlEditor.getWidth());

    for(var n=0;n<text.length;n++)
    {
        var dat = text.substring(0, n)
        var width = textMetrics.getWidth(dat);
        var height = textMetrics.getHeight(dat);

        if(width > fWidth)
        {
            var mult = Math.ceil(width/fWidth)
            var width = width % fWidth;
            height = height*mult;
        }

        charNum[n] = [width, height];
    }

    //console.log("charNum: "+charNum.toSource());

    var mX = e.getX();
    var mY = e.getY();

    var cXY = htmlEditor.getEl().getXY();
    var cX = cXY[0];
    var cY = cXY[1];                    

    var x = mX-cX-20;
    var y = mY-cY;

    //console.log("fin xy: "+x+' '+y);

    var n = -1;
    var z = 0;
    for(key in charNum)
    {
        if(charNum[key][0] > x && charNum[key][1] > y) 
        {
            n = key-1;
            break;
        }
        n++;
        z++;
    }

    if(x < 0 && y < 14) n = -1; 


    if(n == (z-1) && n != -1)
    {
        n++;
    }

    var selection = htmlEditor.win.getSelection();

    range = selection.getRangeAt(0);
    range.selectNodeContents(htmlEditor.getEditorBody());
    range.collapse(true);
    for(var x=0;x<n;x++)
    {
        selection.modify("move", "forward", "character");
    }
});
于 2012-04-19T09:47:10.913 に答える
0

私は@dfilkoviの解決策を試していませんが、それは正しいかもしれませんが、イベントをmousemoveにバインドする解決策はほとんど確実にCPUに大きなオーバーヘッドを引き起こすことに注意してください。

この症状を軽減するには、まずハンドラーでリスナーのバインドを解除し、数ミリ秒後にバインドするようにタイムアウトを設定します。何かのようなもの： 

// assume HandleOriginal as the original function declared by @dfilkovi

// attach the listener
startListener();

// functions
function startListener() {
    htmlEditor.getEl().on('mousemove', HandleAndWait);
}

function stopListener() {
    // maybe this is not the right syntax
    htmlEditor.getEl().on('mousemove', null);
}

function HandleAndWait(e) {
    var C_SLEEP = 50;
    stopListener();

    try { HandleOriginal(e); }
    finally { window.setTimeout(startListener, C_SLEEP); }

}

C_SLEEP次に、最高のユーザー エクスペリエンスに合わせて の値を微調整できます。

于 2012-04-23T17:25:05.040 に答える
0

ExtJs HtmlEditor textarea がロードされたときにアクティベートし、Sencha Docsを試してみてください。公式ドキュメントには次のように書かれています。

Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
supported by this editor.
于 2012-04-15T13:16:19.697 に答える