一个Level 0富文本编辑器的进化历程

富文本编辑器技术经历了从依赖浏览器原生能力到逐步实现自主控制的进化过程，主要分为三个阶段：

Level 0：依赖浏览器原生编辑能力

核心特性：基于浏览器原生的contentEditable属性和designMode，通过捕获事件覆盖默认行为实现加粗、斜体等基础功能。
实现方式：
使用contentEditable="true"使元素可编辑。
通过document.execCommand()执行命令（如bold、italic）修改文本样式。
依赖Selection和Range对象处理选区与光标。
局限性：
浏览器兼容性差（如加粗、回车等操作在不同浏览器中表现不一致）。
数据易混乱（拖拽、粘贴等操作可能导致格式错乱）。
难以统一表现与数据模型。

Level 1：抽象数据操作

核心改进：
仍依赖contentEditable，但引入数据模型抽象。
将DOM操作转换为对数据模型的操作，再映射到视图（类似MVVM模式）。
输出格式：
可输出HTML字符串或自定义文档模型（如JSON）。
优势：
分离数据与视图，提升可维护性。
减少直接DOM操作，降低浏览器兼容性问题。

Level 2：完全自主控制

核心突破：
抛弃contentEditable，自主实现光标、选区与排版。
代表案例：Google Docs早期技术（未开源）。
特点：
完全控制编辑行为，避免浏览器差异。
需从零实现排版引擎，开发成本高。

简单传统编辑器实现示例1. 创建编辑区域<div id="editor" contenteditable="true" style="border: 1px solid #ccc; min-height: 200px;"></div>2. 添加控制栏（以字体样式为例）<select id="fontStyle"> <option value="normal">Normal</option> <option value="bold">Bold</option> <option value="italic">Italic</option></select><button onclick="setFontStyle()">Set Style</button><script> function setFontStyle() { const style = document.getElementById('fontStyle').value; document.execCommand(style, false, null); }</script>3. 保存内容function saveContent() { const content = document.getElementById('editor').innerHTML; console.log(content); // 输出HTML字符串}关键API总结

contentEditable
使元素可编辑（true/false）。
execCommand(command, showUI, value)
执行编辑命令（如'bold'、'insertImage'）。
Selection与Range
操作文本选区与光标位置。
innerHTML
获取或设置编辑区域的HTML内容。

进化趋势与建议

历史问题：execCommand已被MDN废弃，浏览器实现不统一。
现代方案：开源编辑器（如Quill、Slate）已实现自主contentEditable逻辑，推荐直接集成。
开发建议：简单需求可用基础API实现，复杂场景优先选择成熟库。

通过三个阶段的演进，富文本编辑器逐步从浏览器依赖转向开发者可控，未来可能向更模块化、无依赖的方向发展。

您可能感兴趣问答

Collapsible

热门标签

热点问答