富文本编辑器中，JavaScript如何控制选区与内容格式？

在富文本编辑器开发中，JavaScript 如何处理选区与内容格式？本文深入探讨了利用 JavaScript 的 Selection 和 Range API 实现富文本编辑的核心技术。通过 `window.getSelection()` 获取用户选区，并使用 `range.surroundContents()` 对选区内容进行加粗等格式化操作。针对跨节点选区，强调先使用 `extractContents()` 提取内容再进行处理的重要性，避免 DOM 异常。此外，文章还介绍了如何利用 `insertNode()` 插入内容，并保存和恢复光标位置，以及处理复杂选区边界问题的实用技巧。虽然原生 API 灵活，但面对复杂场景，建议采用 ProseMirror 或 Slate.js 等现代框架，以提升开发效率和稳定性。掌握这些核心方法，能有效提升富文本编辑器的用户体验。

答案：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 包裹选区。