Javascript html Editor Cursor Fokus folgende Maus

Question

Ich benutze einen HTML Editor (Midas) als HTML-Editor in meiner Web-Anwendung, was ich tun möchte, ist ein fokussierter Cursor in diesem HTML-Editor folgen Sie der Maus, gibt es einen Weg zu TU das?

Added Beispiel: I Cursor wollen in Textfeld mit der Maus folgen also, wenn Sie einen großen Text in Ihrem Textbereich haben, und Sie werden über sie mit der Maus, Cursor (Textcursor) sollte die Maus, wie dies wie folgt vor:

"Dies ist ein Beispieltext" - wenn die Maus über "Beispiel" Wort ist und zwischen x und a, sollte Textcursor (|) dort fokussiert werden, aber wenn ich die Maus zum Beispiel "Text" Cursor | sollte zwischen Buchstaben sein, in denen sich die Maus gerade befindet.

Answer 1

Ok ich die Lösung gefunden Ext.util.TextMetrics verwenden, zuerst bekomme ich Position jedes Zeichen in Editor, dann vergleiche ich das zu Mauszeigers Position und dann midas Auswahl aktualisiert basierend auf bestimmten Charakter von charNum Array

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

Versuchen Activates ExtJs HtmlEditor textarea when it is loaded und Sencha Docs, die offizielle Dokumentation sagt:

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

Answer 3

ich nicht die Lösung von @dfilkovi versucht, aber wenn auch es richtig sein kann, denken sie daran, dass jede Lösung, die eine Ereignisbindung wird mousemove- meist c aus irgendeinem Grund einen großen Overhead auf CPU.

Um dieses Symptom zu lindern, können Sie den Hörer zuerst an der Behandlungsroutine lösen und dann eine Zeitüberschreitung festlegen, um ihn nach ein paar Millisekunden zu binden; so etwas wie:

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

} 

Sie können dann die Feinabstimmung der Wert von C_SLEEP auf die beste Benutzererfahrung.