如何通过JavaScript的DOM Range API精确操作文本节点，以及它在富文本编辑器中的核心作用？

document.createRange()

setStart()

setEnd()

window.getSelection()

getSelection()

getRangeAt(0)

<img>

<span>

<b>

<i>

<a>

<span>

startContainer

endContainer

offset

这是<b>一段</b>加粗的文本

段加粗

<b>

</b>

startContainer

endContainer

offset

contenteditable

Range.surroundContents()

function applyBold() {
    const selection = window.getSelection();
    if (!selection.rangeCount) return;

    const range = selection.getRangeAt(0);
    if (range.collapsed) return; // 如果没有选中内容，则不操作

    const b = document.createElement('b');
    try {
        range.surroundContents(b);
    } catch (e) {
        // surroundContents在某些复杂情况下会抛出错误，
        // 例如，当Range的边界不“干净”时，即部分内容已加粗，部分没有。
        // 这时需要更复杂的逻辑来处理。
        console.warn("surroundContents failed, falling back to complex logic:", e);
        // 复杂逻辑：
        // 1. range.extractContents() 提取选中内容到一个 DocumentFragment。
        // 2. 遍历 Fragment，对每个文本节点或元素进行处理（如包裹<b>标签）。
        // 3. range.deleteContents() 清空原选中区域。
        // 4. range.insertNode() 将处理后的 Fragment 插入。
        // 5. 调整光标位置。
    }
    selection.removeAllRanges(); // 清除旧的Range
    selection.addRange(range); // 重新应用可能已修改的Range，或者创建新的Range以保持光标
}

surroundContents()

function insertImage(src) {
    const selection = window.getSelection();
    if (!selection.rangeCount) return;

    const range = selection.getRangeAt(0);

    // 创建图片节点
    const img = document.createElement('img');
    img.src = src;
    img.alt = 'Inserted Image';
    img.style.maxWidth = '100%'; // 简单样式，避免图片过大

    // 1. 删除当前选中内容（如果有的话），确保新内容替换旧内容
    range.deleteContents(); 

    // 2. 在Range的起始位置插入图片
    range.insertNode(img);

    // 3. 调整光标位置到图片之后，方便用户继续输入
    // 这一步非常重要，否则光标可能留在图片前面或内部
    range.setStartAfter(img);
    range.setEndAfter(img);
    selection.removeAllRanges();
    selection.addRange(range);
}

function insertLink(text, url) {
    const selection = window.getSelection();
    if (!selection.rangeCount) return;

    const range = selection.getRangeAt(0);
    const a = document.createElement('a');
    a.href = url;
    a.textContent = text; // 或者如果Range有选中内容，可以将选中内容作为链接文本

    range.deleteContents();
    range.insertNode(a);

    range.setStartAfter(a);
    range.setEndAfter(a);
    selection.removeAllRanges();
    selection.addRange(range);
}

range.deleteContents()

range.insertNode()

setStartAfter()

setEndAfter()