Quill
Quill 是一个免费开源、可在浏览器中运行的网页富文本编辑器(rich text editor),属于所见即所得(WYSIWYG)类型,由 Jason Chen 与 Byron Milligan 开发,采用模块化架构并对外提供细粒度 API。它用自有的 Delta 数据格式和 Parchment 文档模型描述内容,使文本状态脱离浏览器 DOM 独立管理,因此被大量内容型网站与协作产品用作编辑区组件。
定义
Quill 是一个面向现代网页的免费、开源的所见即所得编辑器,用 JavaScript 编写,开发者通过引入脚本与样式表并实例化一个编辑器对象即可在页面中使用[1]。它的定位不是照搬完整字处理软件,而是提供一套可裁剪的编辑内核,让站点按自身需要选择格式与功能[2]。
与其他很多编辑器不同,Quill 的核心卖点是 API 与数据模型:所有内容读写都以字符索引和长度为单位进行,事件也以 JSON 结构报告变化,而不是让调用方自行解析 HTML 或比较 DOM 树。这一设计使它既能作为简单的输入框,也能作为需要深度定制的编辑组件基础[3]。
原理
Quill 在浏览器中依托可编辑区域接收输入,同时使用 DOM 变动监听把用户操作归纳进自己的文档模型,DOM 只是模型的呈现结果,而非唯一的数据来源。内容层由 Delta 承担:Delta 是 JSON 的严格子集,用 insert、delete、retain 三种操作描述文档及文档的修改,非文本内容如图片、公式则以单键对象嵌入,长度为 1[4]。由于其格式适合操作变换,Delta 也可用于需要实时同步的协作场景[4]。
文档模型层名为 Parchment,是一棵与 DOM 平行的树结构,节点称为 Blot,对应一个 DOM 节点,可以承载结构、格式或内容;格式也可由较轻量的 Attributor 表达[5]。开发者通过注册新的 Blot 或模块扩展功能,工具栏、快捷键、历史记录、剪贴板、语法高亮等在 Quill 中都是可增删的模块[2]。整体调用关系可概括为:用户输入进入编辑器,经归一变作 Delta 操作,再由 Parchment 映射回 DOM 显示[6]。
独立调用时,格式化一段文字的写法形如 quill.formatText(0, 5, 'bold', true),即以区间加格式名的方式声明结果,而不指定应生成哪一种标签[6]。据此同一份内容在不同浏览器与设备上可以输出一致的标记,这也是其宣称的跨平台一致性来源[2]。
发展历程
Quill 的雏形来自 Jason Chen 参与开发的协作代码编辑器项目 Stypi:当时缺少可用的通用富文本开源编辑器,团队遂自行编写了编辑组件[7]。2012 年 Stypi 被 Salesforce 收购,经协商,编辑组件部分保持开源,随后以 Quill 之名在 GitHub 上独立发展[7]。项目于 2014 年出现,早期版本号为 0.19 系列[8][9]。
2016 年 9 月,Quill 1.0 发布,新增上标、下标、行内代码、代码块、标题、引用、文本方向、视频与嵌套列表等格式,加入以浮动工具栏为特征的 Bubble 主题,并引入 Parchment 作为扩展格式的机制[3][8]。1.x 的最后一个版本 1.3.7 发布于 2019 年 9 月 9 日,此后长期未发正式版,其间虽有 2.0 的开发版本流出,但一直未定稿[10]。
2024 年 4 月 17 日,Quill 2.0 正式发布[10]。该版本把源码改为 TypeScript 并提供官方类型声明,采用 Monorepo 组织仓库,新增多注册表以支持同一页面共存多个格式配置不同的实例,可自动探测滚动容器,并借助 InputEvent 先更新文档模型再同步 DOM。同时补充了表格模块与格式,但初期仅能通过 API 操作表格,尚无完整的行列编辑界面[10]。项目现由知识管理平台 Slab 维护[2]。
应用
Quill 以 npm 包、CDN 脚本等形式分发,许可证为 BSD 3 条款,可直接引入完整构建,也可只取核心构建并自行装配格式与模块[11]。完整构建内含编辑器内核、常用主题、格式与模块;核心构建则不含主题与额外格式,适合需要精简体积的项目[1]。
在行业应用中,它被用于博客与社区站点的正文编辑、评论输入框等场景,同一产品内往往需要功能完备的主编辑区和只保留少数格式的轻量输入区,2.0 的多注册表机制即为这类需求设计。媒体报道显示,LinkedIn、Vox Media、Salesforce、USA Today、Intuit 等企业曾在其产品中使用 Quill[3]。社区与商业产品中的写作、协作类工具也有采用该编辑器的案例[12]。
局限
Delta 是线性的操作流,而表格是二维网格,合并单元格需要在网格层跟踪跨行跨列的位置,在顺序操作模型上实现代价较大,因此官方表格能力长期偏弱,合并单元格、列宽拖拽、表头样式等常见需求多依赖第三方插件或自行扩展[13]。2.0 内置的表格模块也仅覆盖基础的行列操作[10]。
Quill 只识别自身注册过的格式,处理外部 HTML 时会把不认识的标签剥离并为孤立文本补上段落标签,因此并不适合当作通用的 HTML 解析器,把来源复杂的邮件模板、表格排版内容原样导入往往需要额外的转换步骤[14]。图片的拖拽、上传与引用链接显示等能力不在核心功能之内,通常需要开发者自行编写处理逻辑[15]。此外,它原生不提供与 Markdown 的双向同步,复杂嵌套结构也支持有限,这类需求要靠扩展或改用其他编辑器实现[16]。
参见
-
TinyMCE —— 同为老牌的网页富文本编辑器,常与 Quill 在技术选型中并列比较。
-
ProseMirror —— 同样采用自有文档模型的编辑器框架,在嵌套结构处理上思路不同。
-
Slate.js —— 以数据模型为核心的编辑框架,常被作为 Quill 的替代方案讨论。
-
TypeScript —— Quill 2.0 起源码改用其编写并提供官方类型声明。
-
内容管理系统 —— Quill 常见的集成场景之一,用于文章与页面正文编辑。
参考资料
- Installation - Quill Rich Text Editor [引用日期2026-10-29]
- SD Times Open-Source Project of the Week: Quill [引用日期2026-10-29]
- SD Times GitHub project of the week: Quill [引用日期2026-10-29]
- Delta - Quill Rich Text Editor [引用日期2026-10-29]
- parchment [引用日期2026-10-29]
- 富文本编辑器 Quill.js 系列三:架构与扩展 [引用日期2026-10-29]
- Jason Chen Wants to Make Word Processors Obsolete [引用日期2026-10-29]
- オープンソースのWYSIWYGエディタ「Quill 1.0」がリリース [引用日期2026-10-29]
- NodeJS/quill/2.0.0-rc.4 [引用日期2026-10-29]
- 重回铁王座!时隔5年,Quill 2.0 终于发布啦! [引用日期2026-10-29]
- quill [引用日期2026-10-29]
- v2ex.co 上的网页 [引用日期2026-10-29]
- qq.com 上的网页 [引用日期2026-10-29]
- Revision 3ab43e48-7f0c-4954-95a7-0546267f01eb [引用日期2026-10-29]
- 富文本在爱美剧tv上应用踩坑-quill [引用日期2026-10-29]
- 12款主流开源富文本编辑器深度对比:Quill、Slate.js、Tiptap、ProseMirror等核心特性分析 [引用日期2026-10-29]