JavaScriptのhtmlエディタのカーソルのフォーカスマウスのフォーカス

Question

Webアプリケーションのhtmlエディタとしてdhtml（midas）エディタを使用していますが、このHTMLエディタでフォーカスを取得したいのですが、それを行う？

追加例：

：あなたのテキストエリアに大きなテキストを持っていて、マウスで上に行くされている場合、カーソル（テキストカーソルが）このように、マウスに従わなければならないので 私はテキストエリアにカーソルを希望すると、マウスをたどります

"これはex |十分なテキストです" - マウスが "example"の単語の上にあり、xとaの間にテキストカーソル（|）がフォーカスされている必要があります。マウスが現在位置している文字の間になければなりません。

Answer 1

[OK]を、私はその後、私はマウスカーソルにそれを比較し、エディタ内の各文字の位置を取得する最初の、Ext.util.TextMetricsを使用して解決策を見つけました位置し、その後、私は@dfilkoviの解決策を試していない

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"); 
    } 
}); 

Answer 2

がActivates ExtJs HtmlEditor textarea when it is loadedとSencha Docsを試してみて、公式ドキュメントは言う：

Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT 
supported by this editor. 

Answer 3

charNum配列から指定された文字に基づいてMIDAS選択を更新する、それが正しいことができいえ、心に留めては、すべてのソリューションはMOUSEMOVEするイベントを結合することを意志ほとんどがc 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の値。