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

Javascript html editor cursor focus following mouse

本文关键字：跟随 鼠标 焦点 光标 html 编辑器 Javascript      更新时间：2023-09-26

我在我的 Web 应用程序中使用 dhtml （midas） 编辑器作为 html 编辑器，我想做的是在这个 html 编辑器中让一个聚焦光标跟随鼠标，有没有办法做到这一点？

新增示例：我希望文本区域中的光标跟随鼠标，因此，如果您的文本区域中有一个大文本并且您正在用鼠标浏览它，则光标（文本光标）应跟随鼠标，如下所示：

"这是一个ex|充足的文本" - 如果鼠标在"示例"单词上并且在x和a之间，文本光标（|）应该集中在那里，但是当我移动鼠标时，例如"文本"光标|应该在鼠标当前所在的字母之间。

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

尝试在加载时激活 ExtJs HtmlEditor 文本区域和 Sencha Docs，官方文档说：

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

我还没有尝试过@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的价值以获得最佳用户体验。

相关文章：