Javascript html编辑器光标焦点跟随鼠标

问题描述：

我在我的web应用程序中使用dhtml（midas）编辑器作为html编辑器，我想要做的是在此html编辑器中获得聚焦的光标，按照鼠标，是否有办法去做？Javascript html编辑器光标焦点跟随鼠标

追加例题：我想光标在textarea的跟随鼠标，所以如果你在你的文字区域有一个大的文字，你会在它与鼠标，光标（文本光标）应遵循鼠标，就像这样：

“这是一个非常简单的文本” - 如果鼠标在“example”单词之上，并且在x和a之间，那么文本光标（|）应该集中在那里，但是当我移动鼠标时，例如“text”应该位于鼠标当前所在的字母之间。

什么是你的HTML编辑器的ID /名称？ – Coder 2012-04-13 09:22:18

ExtJS htmleditor组件。 – dfilkovi 2012-04-15 12:09:08

答

好吧，我发现使用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"); 
    } 
});

答

尝试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.

我添加了我想要做的例子，重点领域不是我的问题。 – dfilkovi 2012-04-15 22:14:46

答

我还没有试过@dfilkovi的解决方案更新MIDAS选择，但尽管它可以是正确的，记住，任何解决方案结合了事件鼠标移动会大多数是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到最佳的用户体验的价值。

Javascript html编辑器光标焦点跟随鼠标

相关推荐