javascript - 在有 child 的 'contenteditable' div 中设置插入符位置

Question

我有一个这样的 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);
}

在我开始向 div 添加子标签 (span, b, i, u, strike, sup, sub) 之前，这段代码完全可以正常工作

<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>

本质上，发生的事情是，当我尝试将 SetCaretPosition 设置为高于子项开始位置的索引时，setStart 抛出一个 IndexSizeError标签。 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' 之前。

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

Answer 1

所以，我遇到了同样的问题，决定快速编写自己的例程，它递归地遍历所有子节点并设置位置。请注意这是如何将 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
}

希望对您有所帮助!