如何在包含 HTML 的 contentEditable 中获取光标位置？

Question

我需要在 contentEditable div 中获取光标位置。我从Get a range's start and end offset's relative to its parent container 和https://stackoverflow.com/a/4770562/2008261 获得了一些有用的功能。

但是这些函数没有帮助，因为我需要 HTML 中的实际位置，这就是我需要的。

如果我有：

<div id="diva" contenteditable="true">Insert <b>text here</b></div>

我将光标放在“文本”一词之前，它在处理文本时返回 7。但我需要它返回 10，就好像它处理 contentEditabe div 的内部 HTML。

这些是我之前提到的功能：

function getCaretCharacterOffsetWithin(element) {
var caretOffset = 0;
if (typeof window.getSelection != "undefined") {
    var range = window.getSelection().getRangeAt(0);
    var preCaretRange = range.cloneRange();
    preCaretRange.selectNodeContents(element);
    preCaretRange.setEnd(range.endContainer, range.endOffset);
    caretOffset = preCaretRange.toString().length;
} else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
    var textRange = document.selection.createRange();
    var preCaretTextRange = document.body.createTextRange();
    preCaretTextRange.moveToElementText(element);
    preCaretTextRange.setEndPoint("EndToEnd", textRange);
    caretOffset = preCaretTextRange.text.length;
}
return caretOffset;
}

还有：

function getCharacterOffsetWithin(range, node) {
var treeWalker = document.createTreeWalker(
    node,
    NodeFilter.SHOW_TEXT,
    function(node) {
        var nodeRange = document.createRange();
        nodeRange.selectNode(node);
        return nodeRange.compareBoundaryPoints(Range.END_TO_END, range) < 1 ?
            NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
    },
    false
);

var charCount = 0;
while (treeWalker.nextNode()) {
    charCount += treeWalker.currentNode.length;
}
if (range.startContainer.nodeType == 3) {
    charCount += range.startOffset;
}
return charCount;
}

Answer 1

之前必须解决这个问题（我创建了一个基于 Web 的文字处理器）：唯一可行的解​​决方案是遍历 DOM 树并计算 innerHTML 和 outerHTML 的长度，然后使用范围内的偏移量（如果有的话） .

我也强烈反对使用 contentEditable 实现，你将花费更多的时间来尝试修复它们的问题并尝试覆盖它们的行为，而不是编写你真正想要的功能。

我的实现是一个函数，它接受一个范围偏移并向上走，直到它到达指定的边界父级。有些事情要记住，以前的兄弟姐妹很容易添加，但是包装父母在属性等方面很棘手。

我的计算是取节点"<div id="" class="" foo="bar">sometext</div>"的全长，减去innerHTML的长度，减去tagname的长度，subtract 3得到<div id="" class="" foo="bar">的长度

但除非您控制了该 HTML 的创建，否则您的计数仍然可能是错误的，因为根据浏览器，在测试长度时，一行中的多个空格会以 1 个字符或多个字符的形式返回。