JavaScript简易富文本编辑器核心是document.getSelection()与Range API配合contenteditable元素实现DOM级文本控制，通过mouseup/keyup监听选区、surroundContents或手动包裹执行格式化、insertNode插入自定义内容，并需注意浏览器兼容性与DOM稳定性。
JavaScript 中实现简易富文本编辑器的选区操作，核心是利用 document.getSelection() 和 Range API，配合 contenteditable 元素进行 DOM 级别的文本控制。不需要引入大型库，几行关键代码就能完成加粗、插入链接、获取选中文本等基础功能。
启用可编辑区域并监听选区变化
先创建一个支持编辑的容器，并在用户操作（如鼠标松开、键盘抬起）时捕获当前选区：
- 给元素设置
contenteditable="true"属性，例如：<div id="editor" contenteditable="true"></div> - 用
mouseup和keyup事件监听选区变化，避免遗漏鼠标或键盘触发的选区更新 - 每次触发时调用
document.getSelection()获取当前选区对象
获取与判断选区内容
通过 Selection 对象可以安全读取用户高亮的内容：
-
sel.toString()直接返回纯文本内容（最常用） -
sel.rangeCount > 0判断是否有有效选区；为 0 表示光标在某处但未选中文字 -
sel.getRangeAt(0)获取第一个（也是通常唯一）Range，用于后续操作如包裹、替换 - 注意：若选区跨多个元素（比如横跨两个
<p>），range.commonAncestorContainer可帮你定位最近公共父节点
对选区执行格式化操作（如加粗）
使用 Range.surroundContents() 或手动拆分包裹是最稳妥的方式：
立即学习“Java免费学习笔记（深入）”；
- 先
range.cloneContents()备份原内容，再清空range.deleteContents() - 创建新元素（如
document.createElement('strong')），把克隆的节点 append 进去 - 最后用
range.insertNode(strongEl)插入到原位置 - ⚠️ 注意：
surroundContents()对复杂结构容易报错（如选区含块级元素），推荐手动方式更稳定
插入自定义内容（如链接、图片）
在光标位置插入而非替换选区，适合“插入链接”这类操作：
- 若无选区，先用
range.collapse(true)把范围折叠到光标开头 - 创建目标元素（如
a标签），设置href和文本 - 调用
range.insertNode(linkEl)即可插入，光标会自动落在插入内容后 - 插入后建议调用
sel.removeAllRanges()再sel.addRange(range)重置选区，防止焦点丢失
不复杂但容易忽略的是浏览器兼容细节和 DOM 结构稳定性——比如 Safari 对 Range 的处理略有差异，生产环境建议加简单 try/catch；另外频繁操作前最好保存原始 HTML 快照，便于撤销。核心逻辑理清后，扩展字体、颜色、列表等功能只是重复套用同一套 Range 操作模式。
