Javascript html редактор курсора фокус после мыши

Question

Я использую редактор dhtml (midas) в качестве редактора html в своем веб-приложении, то, что я хочу сделать, это получить сфокусированный курсор в этом редакторе html, следуя за мышью, есть ли способ сделай это?

Добавлено Пример: Я хочу, чтобы курсор в текстовом поле следовать за мышью, так что если у вас есть большой текст в текстовом поле, и вы собираетесь над ним с помощью мыши, курсор (текст курсора) должно следовать за мышью, как это:

«Это текст с текстом» - если мышь над словом «пример» и между x и a, текстовый курсор (|) должен быть сфокусирован там, но когда я перемещаю мышь, например, «текстовый» курсор | должно быть между буквами, в которых находится мышь.

Answer 1

Ok Я нашел решение, используя Ext.util.TextMetrics, первый я получаю позицию каждого персонажа в редакторе, то я сравниваю, что курсор мыши положение, а затем обновить Мидас выбор на основе данного символа из массива charNum

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

Я не пробовал решение @dfilkovi, но хотя это может быть правильным, иметь в виду, что любое решение связывании событие MouseMove будет в основном c что вызывает огромные накладные расходы на процессор.

Чтобы облегчить этот симптом, вы можете отменить первое прослушивание в обработчике, а затем установить таймаут, чтобы связать его через несколько миллисекунд; что-то вроде:

// 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 для лучшего пользовательского опыта.