在具有子项的“contenteditable”div 中设置插入符位置

我有一个这样的 HTML 结构：

<div contenteditable="true">This is some plain, boring content.</div>

我还有这个函数，允许我将插入符位置设置到 div 中我想要的任何位置：

// Move caret to a specific point in a DOM element
function SetCaretPosition(object, pos)
{
    // Get key data
    var el = object.get(0); // Strip inner object from jQuery object
    var range = document.createRange();
    var sel = window.getSelection();

    // Set the range of the DOM element
    range.setStart(el.childNodes[0], pos);
    range.collapse(true);

    // Set the selection point
    sel.removeAllRanges();
    sel.addRange(range);
}

这段代码工作得很好，直到我开始添加子标签(span, b, i, u, strike, sup, sub)到 div 例如

<div contenteditable="true">
    This is some <span class="fancy">plain</span>, boring content.
</div>

当这些子标签最终带有自己的子标签时，事情会变得更加复杂，例如

<div contenteditable="true">
    This is some <span class="fancy"><i>plain</i></span>, boring content.
</div>

本质上，发生的事情是setStart抛出一个IndexSizeError当我尝试SetCaretPosition到高于子标签开头的索引。setStart仅在到达第一个子标签之前有效。

我所需要的，是为了SetCaretPosition函数来处理未知数量的这些子标签（以及可能未知数量的嵌套子标签），以便设置位置的方式与没有标签时的方式相同。

所以对于这两个：

<div contenteditable="true">This is some plain, boring content.</div>

和这个：

<div contenteditable="true">
    This is <u>some</u> <span class="fancy"><i>plain</i></span>, boring content.
</div>

SetCaretPosition(div, 20);将插入符号放在“boring”中的“b”之前。

我需要什么代码？非常感谢！

因此，我遇到了同样的问题，并决定快速编写自己的例程，它递归地遍历所有子节点并设置位置。 请注意这如何将 DOM 节点作为参数，而不是像您的原始帖子那样使用 jquery 对象

// Move caret to a specific point in a DOM element
function SetCaretPosition(el, pos){

    // Loop through all child nodes
    for(var node of el.childNodes){
        if(node.nodeType == 3){ // we have a text node
            if(node.length >= pos){
                // finally add our range
                var range = document.createRange(),
                    sel = window.getSelection();
                range.setStart(node,pos);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
                return -1; // we are done
            }else{
                pos -= node.length;
            }
        }else{
            pos = SetCaretPosition(node,pos);
            if(pos == -1){
                return -1; // no need to finish the for loop
            }
        }
    }
    return pos; // needed because of recursion stuff
}

我希望这能帮助你！