如何在子节点的contenteditable中设置插入符位置？

Question

我有此代码（他不正确，但这给出了一个主意）：

function setCaret(contentEditable, pos) {
    if (contentEditable.hasChildNodes()) {
        var
            nodes = contentEditable.childNodes,
            pos2 = 0,
            cpt = 0,
            nb = nodes.length,
            node;

        for (cpt; cpt < nb && pos2 < pos; cpt++) {
            node = nodes[cpt];
            if (node.nodeType === 3) {
                pos2 += node.length;
            } else {
                pos2 += node.textContent.length;
            }
        }

        var textNode; 
        if (pos2 <= pos) {
            textNode = contentEditable.childNodes[cpt];
            pos = pos - pos2;
        } else {
            textNode = contentEditable.childNodes[cpt-1];
        }

        var range = document.createRange();
        range.setStart(textNode, pos);
        range.setEnd(textNode, pos);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
}

想法是根据给定位置找到好节点的位置。

示例（管道是插入符号）：

一些**粗体** |文本。

• 设定位置= 14
• 5个节点[#text，b，#text，b，#text]
• 带有尖号的节点（节点的索引）= 4
• 节点4的开始位置：13
• 14-13 = 1

range.setStart（nodes [4]，1）;

请在所有情况下如何工作我的代码（仅适用于javascript（无库），可选IE）？ 也许存在一个更简单的解决方案？

（JSFiddle测试： https ://jsfiddle.net/mg4mm528/）

Answer 1

借助execCommand，您可以实现自己的目标。

document.execCommand ('bold', false, null);

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand