📝 富文本编辑器架构对比

Quill（真实运行）· Tiptap · Slate · ProseMirror 同屏对比

Quill

数据驱动

欢迎使用 Quill 编辑器

Quill 采用 数据驱动 的设计理念，以 Parchment 文档模型为核心。

它的特点包括：

  • 简洁的 API 设计
  • 基于 Delta 格式的数据描述
  • 丰富的模块化扩展机制
📋 HTML 输出 ▾
设计哲学:数据驱动（Delta 格式描述内容变化）
扩展方式:模块 + 自定义格式
包体积:~125KB (min)

Tiptap

插件化

🔧 Tiptap 编辑器（模拟界面）

Tiptap 基于 ProseMirror 构建，采用 插件化架构，每个功能都是一个独立插件。

内置扩展包括：

你可以直接编辑此区域试试看 ✏️

📋 HTML 输出 ▾
设计哲学:插件化（基于 ProseMirror，每个功能 = 一个扩展）
扩展方式:npm 包 + 自定义 Extension 类
包体积:~200KB+ (含 ProseMirror 核心)

Slate

状态驱动

⚡ Slate 编辑器（模拟界面）

Slate 采用 React 状态驱动 架构，编辑器内容就是普通的 JSON 对象。

核心特性：

你可以直接编辑此区域试试看 ✏️

📋 HTML 输出 ▾
设计哲学:React 状态驱动（编辑器内容 = React State）
扩展方式:自定义 Element/Leaf 组件 + 插件函数
包体积:~150KB (min)

ProseMirror

Schema 驱动

🧩 ProseMirror 编辑器（模拟界面）

ProseMirror 采用 Schema 驱动 架构，严格定义文档结构。

核心概念：

你可以直接编辑此区域试试看 ✏️

📋 HTML 输出 ▾
设计哲学:Schema 驱动（严格定义文档结构的 Schema）
扩展方式:Plugin 系统 + 自定义 Node/Mark
包体积:~300KB+ (min)
💡 Quill 使用 CDN 真实加载运行，其余编辑器为结构模拟展示。点击工具栏按钮可切换样式标记，编辑内容实时反映到 HTML 输出。