从零实现简易富文本编辑器：核心原理与基础架构

一、富文本编辑器的技术本质与实现难点

富文本编辑器的核心在于允许用户在可视化界面中编辑包含格式（如加粗、斜体、颜色）和结构（如列表、表格）的文本内容，同时将这些内容转换为可存储的HTML或自定义格式。其技术本质是通过DOM操作和事件监听，在contenteditable的容器内实现格式的动态应用与内容管理。

1.1 传统方案的局限性

传统富文本编辑器（如CKEditor、TinyMCE）依赖复杂的浏览器API和大量的兼容性处理，导致代码体积庞大（通常超过1MB）。对于需要轻量化或定制化功能的场景（如移动端编辑器、特定行业工具），这些方案显得过于臃肿。

1.2 从零实现的优势

轻量化：仅实现核心功能，代码体积可控制在10KB以内。
可定制性：自由扩展格式类型（如自定义代码块、数学公式）。
学习价值：深入理解浏览器DOM操作与事件机制。

二、基础架构设计：基于contenteditable的MVC模式

2.1 视图层（View）：contenteditable容器

通过设置div元素的contenteditable="true"属性，将其转化为可编辑区域。此区域是用户直接交互的界面，所有格式变化均通过操作其子DOM节点实现。

<div id="editor" contenteditable="true"></div>

2.2 模型层（Model）：数据与状态的抽象

将编辑器内容抽象为虚拟DOM树或HTML字符串，通过解析器（Parser）与序列化器（Serializer）实现与视图层的同步。例如：

解析器：将用户输入的HTML转换为内部数据结构（如JSON表示的段落与格式）。
序列化器：将内部数据结构转换为可存储的HTML或Markdown。

2.3 控制层（Controller）：事件与命令处理

通过监听用户事件（如按键、鼠标操作），触发格式应用命令。例如：

加粗命令：监听Ctrl+B快捷键，在选区周围包裹<strong>标签。
撤销/重做：维护命令栈，通过execCommand或自定义方法实现。

三、核心功能实现：格式应用与选区控制

3.1 格式应用的基本原理

格式应用的核心是操作选区（Selection）并修改DOM结构。例如，实现加粗功能：

获取当前选区：window.getSelection()。
检查选区是否有效：若选区跨多个节点，需拆分并重新组合。
包裹选区内容：创建<strong>节点，将选区内容移入其中。

function applyBold() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;
  const range = selection.getRangeAt(0);
  const strong = document.createElement('strong');
  range.surroundContents(strong);
}

3.2 选区控制的难点与解决方案

难点1：跨节点选区

当用户选区跨越多个DOM节点（如从<p>到<div>），直接操作会导致DOM断裂。解决方案是：

提取选区文本并生成临时节点。
修改原始DOM结构后重新插入内容。

难点2：光标位置恢复

格式应用后，光标可能丢失或位置错误。需通过Range对象保存光标位置，并在操作后恢复：

function saveCursorPosition() {
  const selection = window.getSelection();
  if (selection.rangeCount > 0) {
    return selection.getRangeAt(0).cloneRange();
  }
  return null;
}
function restoreCursorPosition(range) {
  if (range) {
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
  }
}

四、进阶优化：性能与兼容性

4.1 防抖与节流

频繁的DOM操作（如输入时实时格式化）会导致性能问题。通过防抖（debounce）限制操作频率：

function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}
editor.addEventListener('input', debounce(formatContent, 200));

4.2 跨浏览器兼容性

不同浏览器对contenteditable的实现存在差异（如选区API、命令支持）。需通过特性检测（Feature Detection）提供降级方案：

function isCommandSupported(command) {
  return document.queryCommandSupported(command);
}
if (!isCommandSupported('insertHTML')) {
  // 使用自定义方法插入HTML
}

五、调试与测试建议

5.1 开发者工具使用

DOM检查器：实时观察DOM结构变化，定位格式应用错误。
Console日志：记录选区范围、命令执行结果等关键数据。

5.2 单元测试框架

使用Jest等框架测试核心功能：

test('applyBold wraps selection in strong tag', () => {
  const editor = document.createElement('div');
  editor.contentEditable = true;
  editor.innerHTML = '<p>Test text</p>';
  document.body.appendChild(editor);
  const range = document.createRange();
  range.selectNodeContents(editor.querySelector('p'));
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
  applyBold();
  expect(editor.querySelector('p strong')).not.toBeNull();
});

六、总结与后续规划

本篇从技术本质、架构设计到核心功能实现，系统解析了简易富文本编辑器的开发要点。后续篇章将深入探讨：

插件系统设计：如何通过接口扩展格式类型。
协作编辑支持：基于Operational Transformation的实时同步。
移动端适配：触摸事件与虚拟键盘处理。