JS 富文本编辑器开发 - 操作 document.execCommand 的现代替代方案

现代富文本编辑器开发应放弃document.execCommand，转而采用基于contenteditable的DOM操作方案，结合事件监听、状态管理和虚拟DOM技术实现核心功能，并通过工具栏、跨浏览器兼容处理和性能优化提升用户体验。

1. 使用contenteditable属性将普通div或iframe设置为可编辑区域，作为编辑器容器：

   <div id="editor" contenteditable="true"> <p>这是一个可编辑段落</p></div>

2. 事件监听与DOM操作

   键盘事件：监听快捷键（如Ctrl+B）触发样式操作：document.getElementById('editor').addEventListener('keydown', (event) => { if (event.ctrlKey && event.key === 'b') { event.preventDefault(); const selection = window.getSelection(); if (!selection.rangeCount) return; const range = selection.getRangeAt(0); const boldElement = document.createElement('b'); boldElement.appendChild(range.extractContents()); range.insertNode(boldElement); selection.removeAllRanges(); selection.addRange(range); }});

   鼠标事件：通过点击工具栏按钮触发对应DOM操作（如插入图片、创建列表）。

3. 选区管理（Range与Selection）

   获取选区：通过window.getSelection()获取当前选区，操作Range对象修改内容。

   复杂操作：如合并多个Range、处理跨节点选区等需结合Range.setStart()/setEnd()和Selection.addRange()。

1. 列表

   动态创建<ul>/<ol>和<li>，支持嵌套列表：function insertList(ordered) { const selection = window.getSelection(); const range = selection.getRangeAt(0); const list = ordered ? document.createElement('ol') : document.createElement('ul'); const fragment = document.createDocumentFragment(); // 将选区内容分割为多个<li> // ...（需处理选区跨多个段落的情况） list.appendChild(fragment); range.deleteContents(); range.insertNode(list);}

2. 链接

   包裹选区文本为<a>标签，并弹出对话框设置URL：function insertLink() { const selection = window.getSelection(); if (!selection.toString()) return; const url = prompt('输入链接URL:', '

   https://'
   ); if (url) { const range = selection.getRangeAt(0); const a = document.createElement('a'); a.href = url; a.appendChild(range.extractContents()); range.insertNode(a); }}

3. 图片与表格

   图片：通过<input type="file">上传或输入URL，创建<img>并设置src和align属性。

   表格：动态生成<table>结构，提供行/列增删按钮，需处理单元格合并等高级功能。

1. 状态管理

   JSON结构：将编辑器内容转换为JSON（如{ type: 'paragraph', children: [...] }），便于差分存储。

   历史栈：维护两个栈（historyStack和redoStack），每次操作后保存当前状态到historyStack。

2. 操作逻辑

   撤销：从historyStack弹出上一次状态，恢复编辑器内容，并将当前状态压入redoStack。

   重做：从redoStack弹出下一次状态，恢复内容，并重新压入historyStack。

   差分算法：仅存储状态变化部分（如使用diff-match-patch库），减少内存占用。

1. Polyfill与库

   Range/Selection Polyfill：如rangefix或selection-polyfill填补旧浏览器API缺失。

   成熟库：直接使用Quill.js、Draft.js或Slate.js，它们已处理兼容性问题。

2. 测试策略

   在Chrome、Firefox、Safari和Edge中测试基础功能，重点关注选区操作、事件触发和样式渲染差异。

1. 减少DOM操作

   使用DocumentFragment批量插入节点，避免频繁重排/重绘：const fragment = document.createDocumentFragment();for (let i = 0; i < 100; i++) { const p = document.createElement('p'); p.textContent = `段落${i}`; fragment.appendChild(p);}document.getElementById('editor').appendChild(fragment);

2. 虚拟DOM

   集成React/Vue管理编辑器状态，通过虚拟DOM差异更新实际DOM，减少操作次数。

3. 懒加载

   对长文档分块渲染，仅加载可视区域内容，滚动时动态加载更多块。

4. 节流与防抖

   对input、scroll等高频事件应用防抖（如输入延迟500ms后处理）：let debounceTimer;editor.addEventListener('input', () => { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => { saveHistory(); // 保存状态 }, 500);});

1. 基础按钮

   提供加粗、斜体、下划线、对齐等按钮，绑定对应DOM操作函数。

2. 高级功能

   集成代码块、公式编辑（如KaTeX）、Markdown转换等，通过插件机制扩展功能。

现代富文本编辑器需围绕contenteditable构建，通过精细的DOM操作、状态管理和事件监听实现核心功能，结合虚拟DOM、懒加载等技术优化性能，并依赖成熟库或Polyfill解决兼容性问题。此方案虽复杂，但能提供更灵活、可维护的编辑体验，远超已废弃的document.execCommand。