javascript - 在包含标签的 contenteditable div 中获取插入符号索引

Question

我有一个 contentEditable div，其中有多个标签(br、b、 u, i) 和文本。

我需要获取相对于 div 的插入符索引位置，包括所有标签。

例如:

<div id="h" contenteditable="true">abc<b>def<br>ghi</b>jkl</div>

如果光标在 g 和 h 之间，我需要插入符索引位置为 14。 问题是找到的方法使用 treeWalker在这种情况下不起作用。 未找到粗体标记...可能是因为它未关闭。 我也尝试了几种方法，但仍然没有成功。

我需要它在 Firefox 中工作。 谢谢。

Answer 1

你试过吗？ Get a range's start and end offset's relative to its parent container

直接链接到 jsfiddle: https://jsfiddle.net/TjXEG/1/

函数代码:

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 showCaretPos() {
    var el = document.getElementById("test");
    var caretPosEl = document.getElementById("caretPos");
    caretPosEl.innerHTML = "Caret position: " + getCaretCharacterOffsetWithin(el);
}

document.body.onkeyup = showCaretPos;
document.body.onmouseup = showCaretPos;