Quill

经典开源富文本编辑器，以 Delta 数据格式和模块化架构闻名，被全球数百万应用采用。

技术简介说明

Quill 是由 Jason Chen 和 Byron Milligan 创建的现代富文本编辑器，目前由 Slab 公司维护。它自 2014 年首次发布以来，一直是 JavaScript 生态中最广泛使用的开源富文本编辑器之一，GitHub Stars 超过 47,000，npm 周下载量约 350 万。

Quill 的核心创新是其 Delta 格式——一种基于 JSON 的文档描述和操作格式。Delta 使用 insert、delete、retain 三种操作来描述文档内容和变更，这种设计使得内容的序列化、传输和协作编辑变得极为简洁。Quill 的文档模型 Parchment 则通过"Blot"的概念将 DOM 元素映射为可操作的数据单元。

2024 年，Quill 发布了里程碑式的 v2.0 版本，完成了 TypeScript 重写。尽管更新节奏相比 TipTap、Lexical 等新兴框架有所放缓，Quill 凭借广泛的生态基础和简单的上手体验，仍然在 CMS、博客、简单内容编辑等场景中占据重要地位。

基本信息

• 官网：https://quilljs.com/
• GitHub：https://github.com/slab/quill
• License：BSD
• 最新版本：v2.0.3（2024 年底发布）
• 主要维护者/公司：Slab
• GitHub Stars：~47,100+
• npm 周下载量：~3.5M
• 框架支持：框架无关（原生 JavaScript）

快速上手

安装

# npm 安装
npm install quill
 
# CDN 引入
# <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" rel="stylesheet">
# <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.js"></script>

基础配置

<!-- 引入样式 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" rel="stylesheet" />
 
<!-- 编辑器容器 -->
<div id="editor">
  <p>Hello World!</p>
</div>
 
<!-- 引入脚本 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.js"></script>

最小示例

import Quill from 'quill'
 
// 或使用主题样式
// import 'quill/dist/quill.snow.css'  // Snow 主题（带工具栏）
// import 'quill/dist/quill.bubble.css' // Bubble 主题（气泡工具栏）
// import 'quill/dist/quill.core.css'   // 核心样式（无工具栏）
 
const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],
      ['blockquote', 'code-block'],
      [{ header: 1 }, { header: 2 }],
      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ indent: '-1' }, { indent: '+1' }],
      [{ color: [] }, { background: [] }],
      [{ align: [] }],
      ['link', 'image'],
      ['clean'],
    ],
  },
  placeholder: '开始编辑...',
})
 
// 获取内容
const delta = quill.getContents()       // Delta 格式
const html = quill.root.innerHTML       // HTML 格式
 
// 设置内容
quill.setContents([
  { insert: 'Hello ' },
  { insert: 'World', attributes: { bold: true } },
  { insert: '\n' },
])

Delta 格式示例

// Delta 是 Quill 的核心数据格式
const delta = {
  ops: [
    { insert: 'Hello ' },
    { insert: 'World', attributes: { bold: true, color: '#f00' } },
    { insert: '\n', attributes: { header: 1 } },
    { retain: 5, attributes: { italic: true } },  // 对已有内容应用格式
    { delete: 3 },                                  // 删除 3 个字符
  ],
}
 
// Delta 可以进行 diff、compose、transform 操作
const QuillDelta = require('quill-delta')
const a = new QuillDelta([{ insert: 'Hello' }])
const b = new QuillDelta([{ insert: 'Hello World' }])
const diff = a.diff(b) // Delta({ ops: [{ retain: 5 }, { insert: ' World' }] })

核心概念与架构

架构设计

Quill 的架构由三个核心层组成：

┌─────────────────────────────────────┐
│           Quill Editor               │  ← API 层
├─────────────────────────────────────┤
│  ┌──────────┐  ┌─────────────────┐  │
│  │  Delta    │  │   Modules       │  │  ← 功能层
│  │  Format   │  │  (Toolbar等)    │  │
│  └──────────┘  └─────────────────┘  │
├─────────────────────────────────────┤
│           Parchment                  │  ← 文档模型层
│  ┌──────────┐  ┌─────────────────┐  │
│  │  Blots   │  │   Registry      │  │
│  └──────────┘  └─────────────────┘  │
└─────────────────────────────────────┘

核心概念

• Delta：Quill 的数据格式，使用 insert/delete/retain 操作描述文档和变更
• Parchment：Quill 的文档模型系统，管理 Blot 的注册和查找
• Blot：DOM 元素的数据映射，分为 InlineBlot、BlockBlot、EmbedBlot、ScrollBlot
• Format：通过 Attributes 和 Classes 两种方式应用样式
• Module：可插拔的功能模块（Toolbar、History、Keyboard、Clipboard 等）
• Selection：当前的选区范围
• Source：操作来源标记（user、api、silent）

工作原理

1. 用户输入触发 DOM 事件
2. Parchment 将 DOM 变化映射为 Delta 操作
3. Quill 应用 Delta 操作更新内部文档状态
4. 内部状态变化同步回 DOM
5. Modules（如 Toolbar）响应状态变化更新 UI

核心特性

• Delta 数据格式：简洁的 JSON 格式，支持 diff、compose、transform 操作
• 模块化架构：工具栏、历史记录、键盘快捷键等均为可插拔模块
• 丰富的内置功能：工具栏、格式化、列表、缩进、链接、图片等开箱即用
• Parchment 文档模型：通过 Blot 系统将 DOM 映射为可操作数据
• 两种主题：Snow（传统工具栏）和 Bubble（气泡工具栏）
• API 控制：丰富的编程式 API，支持内容操作和事件监听
• TypeScript 重写：v2.0 完成了完整的 TypeScript 重写
• 广泛的社区插件：大量的第三方模块和主题
• 协作基础：Delta 的 transform 操作天然支持 OT 协作
• 零依赖：核心不依赖其他 npm 包

生态图

内置模块

社区生态

• quill-delta：独立的 Delta 操作库
• quill-delta-to-html：Delta 转 HTML 工具
• react-quill：React 封装组件
• vue-quill：Vue 封装组件
• quill-cursors：协作光标模块
• quill-mention：@提及功能
• quill-table：表格支持（非官方）
• quill-image-resize：图片调整大小
• quilljs-markdown：Markdown 支持

集成生态

• Strapi CMS：内置 Quill 作为 WYSIWYG 编辑器
• WordPress：部分主题和插件集成 Quill
• 各种表单框架：Ant Design、Element UI 等都有 Quill 封装

适用场景

• 简单内容编辑：博客、CMS 文章编辑、评论系统（最佳选择）
• 表单富文本输入：需要轻量级富文本输入的表单场景
• 传统 WYSIWYG 需求：需要工具栏 + 编辑区的经典编辑体验
• 邮件编辑器：构建所见即所得的邮件模板编辑器
• 快速原型：需要快速实现编辑功能，不想投入大量开发时间
• 遗留系统集成：大量现有项目已使用 Quill，维护和扩展
• 教育平台：课程内容编辑器

开发与工程化

开发流程

# 克隆仓库
git clone https://github.com/slab/quill.git
cd quill
 
# 安装依赖
npm install
 
# 开发
npm run dev
 
# 构建
npm run build
 
# 测试
npm test

自定义 Blot 开发

import Quill from 'quill'
const Inline = Quill.import('blots/inline')
 
// 创建自定义行内 Blot（如高亮标记）
class HighlightBlot extends Inline {
  static blotName = 'highlight'
  static tagName = 'mark'
  static className = 'highlight'
 
  static create(value) {
    const node = super.create(value)
    node.setAttribute('data-color', value)
    return node
  }
 
  static formats(node) {
    return node.getAttribute('data-color')
  }
}
 
Quill.register(HighlightBlot)
 
// 使用
quill.format('highlight', 'yellow')

自定义模块

class WordCountModule {
  constructor(quill, options) {
    this.quill = quill
    this.options = options
    this.container = document.querySelector(options.container)
    this.quill.on('text-change', this.update.bind(this))
    this.update()
  }
 
  update() {
    const text = this.quill.getText().trim()
    const words = text.length > 0 ? text.split(/\s+/).length : 0
    this.container.textContent = `${words} 字`
  }
}
 
Quill.register('modules/wordCount', WordCountModule)
 
const quill = new Quill('#editor', {
  modules: {
    wordCount: { container: '#word-count' },
  },
})

性能与安全

性能特点

• 轻量级：核心包体积中等（约为 TipTap 的两倍）
• Delta 操作高效：Delta 的 diff/compose/transform 操作性能优秀
• 大文档挑战：Quill 默认不对大文档进行虚拟化渲染

性能优化

• 避免频繁调用 getContents()，缓存 Delta 结果
• 大文档考虑分页或分段加载
• 使用 source: 'silent' 跳过不必要的事件触发
• 合理配置工具栏，避免加载不需要的模块

安全注意

• 对用户输入内容进行 HTML 消毒
• 使用 Quill 的 sanitize 选项处理链接等
• 自定义 Blot 的 create 方法注意 XSS 防护
• 服务端渲染 Quill 输出时使用 DOMPurify
• CVE 历史：Quill 有过 XSS 相关漏洞，保持更新到最新版本

技术对比

最佳实践

1. 使用 Delta 作为存储格式：Delta 比 HTML 更稳定、更小、更容易 diff
2. 服务端渲染 Delta：使用 quill-delta-to-html 在服务端将 Delta 转为 HTML
3. 限制工具栏功能：根据实际需求精简工具栏按钮，减少用户困惑
4. 自定义格式注册：在 Quill.register() 注册自定义格式后再使用
5. 粘贴处理：配置 clipboard 的 matchers 控制粘贴行为
6. 版本锁定：v2.0 生态仍在过渡期，部分插件可能未适配 v2
7. 迁移规划：新项目如果需求较复杂，考虑 TipTap 或 Lexical

技术局限与边界

• 更新节奏放缓：v2.0 发布于 2024 年底，此后更新较少（最后 npm 发布 2024 年 11 月）
• v2 插件生态未完全就绪：许多第三方插件仍停留在 v1 时代
• 无 SSR 支持：Quill 依赖浏览器 DOM，不支持服务端渲染
• 无纯装饰：缺乏纯装饰 API，协作光标等需要 DOM 覆盖层实现
• Delta 学习曲线：Delta 格式虽然强大，但与直觉不完全一致
• 框架集成需包装：React/Vue 项目需要第三方封装或自行适配
• 扩展性有限：相比 ProseMirror 或 Slate，深度定制的能力较弱
• 不适合复杂文档：如表格嵌套、可拖拽块等复杂交互实现困难

学习资源

• 官方文档：https://quilljs.com/docs/quickstart/
• Delta 格式文档：https://quilljs.com/docs/delta/
• API 文档：https://quilljs.com/docs/api/
• 示例集：https://quilljs.com/playground/
• GitHub 仓库：https://github.com/slab/quill
• quill-delta：https://github.com/quilljs/delta
• 社区插件列表：https://github.com/quilljs/quill/discussions

2026 年现状

最新版本

• v2.0.3（2024 年底发布，2026 年中仍为最新稳定版）
• npm 最后发布：2024 年 11 月 30 日
• quill-delta 仍为 CommonJS 格式（v2.0.2 有警告）

发展趋势

• 维护模式：Slab 维护团队更新节奏明显放缓
• v2 生态完善中：部分社区插件正在适配 v2，但进度不一
• 用户基数大：尽管更新放缓，全球仍有数百万应用依赖 Quill
• 新项目分流：新项目越来越多地选择 TipTap、Lexical 等现代框架

社区活跃度

• GitHub Stars：~47,100+（WYSIWYG 编辑器中最高）
• npm 周下载量：~3.5M
• 2026 年排名：Strapi 评选 #5，Eddyter 测试仍推荐
• 社区讨论仍活跃，但核心开发节奏放缓

定位总结

Quill 在 2026 年仍然是简单富文本编辑场景的可靠选择，其 Delta 格式和广泛的用户基数是不可忽视的优势。但如果项目需要复杂的编辑器功能、协作编辑、或现代化的开发体验，建议优先考虑 TipTap 或 Lexical。对于已有 Quill 项目，保持 v2.0+ 版本并注意安全更新即可。