Range是文档中的连续区域，可跨节点操作；Selection代表用户选择，包含一个或多个Range。通过getSelection().getRangeAt(0)获取选区范围，用surroundContents()、extractContents()、insertNode()等方法实现加粗、插入图片链接等功能，二者协同完成富文本编辑核心逻辑。
DOM Range API在JavaScript中扮演着核心角色，它允许开发者以极其精细的方式操作文档中的连续区域，无论是文本节点、元素节点还是它们的组合。在富文本编辑器中，它更是实现用户选择、内容格式化、插入与删除等所有交互行为的基石。简单来说，没有Range，富文本编辑器几乎无法想象。
DOM Range API提供了一种强大的机制来定义文档中的一个连续区域，这个区域可以跨越多个节点，甚至可以只包含文本节点的一部分。通过
document.createRange()创建Range对象后，我们可以使用
setStart()和
setEnd()方法来精确地指定这个区域的起点和终点。对于文本节点，这两个方法接受一个节点引用和一个字符偏移量，这意味着我们能精确到单个字符级别进行操作，这在处理用户输入和格式化文本时至关重要。
DOM Range API与Selection API之间有何区别和联系，它们如何协同工作？
在我看来，理解Range和Selection的关系，是掌握富文本编辑器的关键一步。Range，顾名思义，是一个“范围”，它定义了文档中的一个连续区域，可以是你程序创建的，也可以是用户选中的。它是一个纯粹的、逻辑上的区域描述。而Selection，则是浏览器提供的一个全局对象，它代表了用户在文档中实际的“选择”。你可以把它想象成用户鼠标拖动或键盘Shift键选择的那块高亮区域。
这两者之间，Selection是Range的容器。
window.getSelection()会返回当前的Selection对象，这个Selection对象通常包含一个或多个Range对象（虽然在大多数现代浏览器中，用户一次只能创建一个连续的Range）。当我需要对用户当前选中的内容进行操作时，我会先通过
getSelection()获取Selection对象，然后用
getRangeAt(0)来取出它所包含的第一个（也是通常唯一一个）Range对象。
立即学习“Java免费学习笔记（深入）”；
举个例子，如果我想让用户选中的文本加粗：
- 我会获取当前的Selection。
- 从Selection中获取Range。
- 然后，我可能会创建一个
元素，并使用Range的
surroundContents()
方法将选中的内容包裹起来。 - 或者，更复杂但更健壮的做法是，我可能会先用
extractContents()
把Range里的内容取出来，在取出的内容上进行处理（比如遍历文本节点并创建新的标签），最后再用
insertNode()
把处理后的内容放回原处。
这种协同工作模式是富文本编辑器中各种操作的基础。Selection告诉我们用户“想做什么”，而Range则提供了“如何做”的精确工具。
在实现富文本编辑器的核心功能时，DOM Range API面临哪些常见的挑战和陷阱？
坦白说，用DOM Range API来构建一个健壮的富文本编辑器，远不是一帆风顺的。我个人在实践中遇到过不少“坑”，有些甚至让人抓狂。
一个首当其冲的问题是跨浏览器兼容性。虽然DOM Range API已经标准化很久了，但不同浏览器在某些边缘情况下的行为仍然可能存在细微差异。例如，在处理空行、列表项的末尾，或者当Range的边界恰好落在一些特殊元素（如
@@##@@或
）的内部或外部时，Chrome、Firefox和Safari可能会有不同的表现。这往往需要大量的测试和针对性的兼容性代码。
其次，复杂的节点结构是另一个巨大的挑战。富文本编辑器中的内容通常是高度结构化的，文本节点往往被各种行内元素（
,
,
,
等）层层包裹。当用户选中一段文本，这段文本可能横跨多个这样的嵌套元素。这时，
startContainer、
endContainer和它们的
offset计算会变得异常复杂。比如，用户选中了
这是一段加粗的文本中的
段加粗，Range的起点可能在
内部，终点却在之后，如何正确地提取、修改和重新插入内容，需要非常精细的逻辑来处理边界情况和节点分裂合并。
再来就是光标位置的持久化与恢复。当编辑器内容发生变化（比如异步加载内容、撤销/重做操作，或者组件重新渲染）时，我们往往需要保存当前的光标位置（即Range），并在操作完成后恢复它。Range对象本身是DOM的一部分，不能直接序列化。这就要求我们设计一种机制，将Range的
startContainer/
endContainer转换为某种可序列化的“路径”（比如从根节点到目标节点的子节点索引路径），以及对应的
offset，然后在需要时再反向重建Range。这听起来简单，但实际操作起来，尤其是在复杂的DOM树中，往往充满陷阱。
最后，
contenteditable属性虽然方便，但也带来不少浏览器自身的怪异行为。它并不是一个完美的解决方案，有时会在用户删除内容、合并节点或在特定位置输入时产生意想不到的DOM结构变化，这些变化可能会破坏我们对Range的预期，从而导致光标跳动、格式丢失等问题。很多时候，我们不得不通过监听各种事件，然后手动规范化DOM结构或调整Range，来“纠正”浏览器的行为。
如何利用DOM Range API实现文本格式化（如加粗、斜体）和内容插入（如图片、链接）？
利用DOM Range API实现文本格式化和内容插入，是富文本编辑器的核心功能，也是最能体现其精细操作能力的地方。
文本格式化（如加粗、斜体）
实现加粗或斜体这类格式化操作，通常有几种策略。最直接的，如果用户选中了纯文本，我们可以使用
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，对每个文本节点或元素进行处理（如包裹标签）。
// 3. range.deleteContents() 清空原选中区域。
// 4. range.insertNode() 将处理后的 Fragment 插入。
// 5. 调整光标位置。
}
selection.removeAllRanges(); // 清除旧的Range
selection.addRange(range); // 重新应用可能已修改的Range，或者创建新的Range以保持光标
}然而，
surroundContents()在处理复杂、嵌套或部分格式化的内容时，往往会遇到问题。更健壮的实现通常涉及：
-
range.extractContents()
: 将选中的内容从DOM中移除，并返回一个DocumentFragment
。 -
处理
DocumentFragment
: 遍历这个Fragment
，对其中的文本节点或元素进行递归处理，例如，如果发现文本没有加粗，就用标签包裹它；如果已经加粗，则可能需要移除
标签（实现取消加粗）。
-
range.deleteContents()
: 确保原位置的内容被彻底清空（如果extractContents
没有完全移除）。 -
range.insertNode(processedFragment)
: 将处理后的Fragment
重新插入到Range的起始位置。 -
更新光标位置: 插入后，可能需要手动调整Range的
startContainer
和endContainer
，使其包裹新插入的内容，或者将光标定位到新内容的末尾，方便用户继续输入。
内容插入（如图片、链接）
插入内容相对直接，但同样需要注意光标的定位。
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()将新创建的元素插入到Range的起始点。最后，通过
setStartAfter()和
setEndAfter()来调整Range，将光标定位到新插入元素的后面，这是为了提供更好的用户体验，让用户可以顺畅地继续编辑。这些看似简单的API调用背后，是无数次调试和优化才能达到的流畅体验。
