答案：JavaScript通过Selection和Range API实现富文本编辑功能。使用window.getSelection()获取选区，range.surroundContents()包裹内容实现加粗等格式，注意跨节点选区需先extractContents()；插入内容时用insertNode()并保存恢复光标位置；处理复杂选区需判断startContainer和endContainer，避免DOM异常；虽可手动实现基础功能，但复杂场景建议采用ProseMirror或Slate.js等现代框架。
在富文本编辑器中，JavaScript 通过浏览器提供的 Selection 和 Range API 来处理用户选区和内容格式。掌握这些 API 可以实现加粗、插入链接、修改字体等常见功能。
理解 Selection 和 Range 对象
当用户在编辑器中选中文本时，浏览器会创建一个 Selection 对象，表示当前的选区。它包含一个或多个 Range 对象，每个 Range 代表一段连续的选中区域。
常用操作：
- window.getSelection() 获取当前选区
- selection.getRangeAt(0) 获取第一个 Range（通常只处理一个）
- range.cloneContents() 复制选中内容的 DOM 片段
- range.deleteContents() 删除选中内容
- range.surroundContents(element) 将选中内容包裹在指定元素内（如 加粗）
应用基础格式：加粗、斜体、颜色等
要对选中内容添加格式，通常是创建一个 HTML 元素（如 <strong> 或 <span style="color:red">），然后用 surroundContents 包裹选区。
立即学习“Java免费学习笔记（深入）”；
示例：实现加粗功能
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
if (selection.rangeCount === 0) return;
const range = selection.getRangeAt(0);
const boldEl = document.createElement('strong');
range.surroundContents(boldEl);
注意：如果选区跨多个节点或部分选中标签，surroundContents 可能抛错。此时应先用 extractContents() 提取内容再插入新元素。
插入内容与恢复光标位置
除了格式化，常需插入图片、链接或自定义内容。可使用 range.insertNode() 在选区起始处插入节点。
插入后若想保留光标位置，需在操作前保存 Range，在插入后重新设置选区：
const savedRange = window.getSelection().getRangeAt(0).cloneRange();// 插入内容
const node = document.createTextNode("新文本");
range.insertNode(node);
// 恢复光标
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(savedRange);
处理复杂选区边界问题
实际使用中，用户可能选中部分内容（如“hel” in “hello”），此时直接操作可能导致 DOM 结构异常。建议：
- 使用 range.startContainer 和 range.endContainer 判断选区是否在文本节点内
- 必要时调用 range.extractContents() 安全提取内容
- 对非纯文本选区，考虑使用 document.execCommand()（已弃用但兼容性好）或转向现代方案如 ProseMirror、Slate.js
基本上就这些核心方法。虽然原生 API 灵活，但在处理嵌套标签、跨行选区时容易出错，开发复杂编辑器建议结合成熟框架。不过理解底层机制，有助于调试和定制功能。
