答案：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 元素（如或），然后用surroundContents包裹选区。
立即学习“Java免费学习笔记（深入）
”；
示例：实现加粗功能Comet AI 浏览器下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载const selection = window.getSelection();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();// 插入内容constnode= 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 灵活，但在处理嵌套标签、跨行选区时容易出错，开发复杂编辑器建议结合成熟框架。不过理解底层机制，有助于调试和定制功能。