选区与命令系统是javascript富文本编辑器的核心，通过selection和range接口实现用户对内容的选择与操作。selection表示用户选中的内容，可包含一个或多个range对象，常用window.getselection()获取；range则精确描述文档中连续区域，支持跨节点操作。传统编辑器依赖document.execcommand执行加粗、插入图片等命令，但该api已被废弃，存在浏览器行为不一致、无法精细控制撤销栈等问题。现代编辑器如slate.js、prosemirror等转向禁用execcommand，转而监听事件并手动操作range，结合抽象模型（如ast）实现高可控性。典型加粗操作包括获取当前选区、创建strong元素并用surroundcontents包裹内容。为确保可靠性，需在异步前保存clonerange()，避免无焦点时修改，并正确处理光标边缘情况。现代方案虽复杂度高，但提升了一致性和维护性。
在实现或使用 JavaScript 富文本编辑器时，选区（Selection）与命令系统（Command System）是核心功能模块。它们共同支撑了用户对内容的可视化操作，比如加粗、插入图片、调整对齐方式等。理解浏览器原生的选区机制和 document.execCommand（尽管已废弃）或现代替代方案，是开发富文本编辑器的基础。
选区（Selection）与范围（Range）
浏览器提供了 Selection 和 Range 接口来表示用户当前的选择状态和可操作的内容区域。
Selection 表示用户在页面中选中的内容，可以通过 window.getSelection() 获取。它包含一个或多个 Range 对象，大多数情况下只有一个。
Range 是一个更底层的接口，用于精确描述文档中的一段连续内容，可以跨节点，不依赖用户是否真正“选中”。
立即学习“Java免费学习笔记（深入）”；
常见操作包括：- 获取当前选区：
const sel = window.getSelection(); - 获取选区的第一个范围：
const range = sel.getRangeAt(0); - 保存选区：在弹窗或异步操作前保存 Range，以便恢复
- 恢复选区：将之前保存的 Range 重新添加到 Selection 中
- 判断是否有选区：
sel.rangeCount > 0
execCommand 与命令执行系统
传统富文本编辑器广泛使用 document.execCommand 来执行格式化命令。虽然该 API 已被标记为废弃，但在许多项目中仍可见。
基本用法如下：
document.execCommand('bold'); // 加粗
document.execCommand('insertImage', false, 'https://example.com/img.png');
document.execCommand('justifyCenter'); // 居中对齐
特点与限制：
- 命令作用于当前 document 的激活选区
- 部分命令需要传参，如 insertImage 需要 URL
- 行为在不同浏览器中可能不一致
- 无法处理复杂结构，比如嵌套块级元素
- 不支持撤销栈的精细控制
现代替代方案：ContentEditable + Range 操作
随着 Slate.js、ProseMirror、TipTap 等现代编辑器的兴起，直接操作 DOM Range 成为主流方式。
这类系统通常：
- 禁用默认的 execCommand
- 监听键盘和菜单事件
- 手动解析当前选区所在的节点结构
- 通过 Range 插入、包裹或修改 DOM 节点
- 维护自己的模型（如 AST 或 JSON 文档树）
例如，实现加粗功能：
const selection = window.getSelection();
if (!selection.rangeCount) return;
const range = selection.getRangeAt(0);
const boldEl = document.createElement('strong');
range.surroundContents(boldEl);
选区管理的最佳实践
在复杂编辑器中，选区容易在异步操作后丢失。建议：
- 在执行异步操作前保存 Range
- 使用
cloneRange()复制选区状态 - 避免在无焦点时修改选区
- 在光标位于空行或边缘时，正确处理块级元素的插入逻辑
- 考虑使用 Selection.setBaseAndExtent() 精确控制光标位置
基本上就这些。掌握 Selection 与 Range 是构建可靠编辑功能的前提，而命令系统的设计决定了编辑器的灵活性与可维护性。现代编辑器趋向于脱离 execCommand，转为基于模型与 Range 的手动控制，虽然复杂度上升，但换来更高的可控性与一致性。
