向contenteditable div插入HTML后，如何将光标定位在插入内容之后？

你可以通过调整选区范围，在插入HTML后将光标移到内容末尾的紧后方，具体修改思路和代码如下：

原代码插入HTML后光标停在内容内部，是因为insertNode仅完成内容插入操作，未更新选区位置。我们需要在插入完成后，重新创建并设置选区，将光标定位到插入内容的最后位置之后。

修改后的基础版代码 #

function insertHtmlAtCursor(html) {
    let selection = window.getSelection();
    if (!selection.getRangeAt || !selection.rangeCount) return;

    let range = selection.getRangeAt(0);
    let node = range.createContextualFragment(html);
    let lastInsertedNode = node.lastChild; // 记录插入片段的最后一个子节点
    range.insertNode(node);

    // 调整光标到插入内容的紧后方
    if (lastInsertedNode) {
        range = document.createRange();
        range.setStartAfter(lastInsertedNode); // 将选区起始点设为最后节点之后
        range.collapse(true); // 折叠选区到起始位置（即光标位置）
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

复杂HTML结构适配版（处理嵌套元素） #

如果插入的HTML包含多层嵌套元素，上面的基础版可能无法精准定位到最末尾，这时候可以用递归找到最底层的文本节点再调整光标：

// 递归查找节点链中的最后一个文本节点
function getLastTextNode(node) {
    if (node.nodeType === Node.TEXT_NODE) return node;
    if (node.lastChild) return getLastTextNode(node.lastChild);
    return node;
}

function insertHtmlAtCursor(html) {
    let selection = window.getSelection();
    if (!selection.getRangeAt || !selection.rangeCount) return;

    let range = selection.getRangeAt(0);
    let node = range.createContextualFragment(html);
    range.insertNode(node);

    let lastNode = getLastTextNode(node);
    if (lastNode) {
        range = document.createRange();
        // 如果是文本节点，光标定位到文本末尾；否则定位到节点后方
        if (lastNode.nodeType === Node.TEXT_NODE) {
            range.setStart(lastNode, lastNode.length);
        } else {
            range.setStartAfter(lastNode);
        }
        range.collapse(true);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

关键逻辑说明 #

1. 记录插入内容的末尾节点（或最底层文本节点），确保能定位到插入内容的终点
2. 创建新的Range对象，将起始位置设置在末尾节点之后（或文本节点的最后一位）
3. 折叠Range并重新设置选区，让光标落在插入内容的紧后方

内容的提问来源于stack exchange，提问作者Littlebob