Quill：Web富文本编辑器介绍

作者：马育民 • • 阅读：10138

介绍

Quill 是开源、BSD协议、无框架依赖的 Web 所见即所得富文本编辑器，主打可扩展、API驱动、Delta结构化文档模型，GitHub 47k+ Star，广泛用于评论、博客、后台内容编辑场景。

支持PC、移动端

官网：https://quilljs.com/

版本

目前最新版是 2.x，要安装这个版本

特点

1. Delta 文档模型（最大特色）

不直接依赖原始DOM，使用 JSON‑Delta 描述文档内容与变更。

  • 三种基础操作：insert插入、delete删除、retain保留；attributes存放格式（加粗、颜色等）
  • Delta既可以表示完整文档，也可以表示增量改动，天然适合协同编辑、OT算法、版本回溯
  • 可同时输出：delta(JSON) / html字符串

示例Delta：

{
  "ops": [
    {"insert":"Hello "},
    {"insert":"World","attributes":{"bold":true}},
    {"insert":"\n"}
  ]
}

2. 模块化、可扩展架构

  • Module：工具栏、历史记录、剪贴板等模块按需开启关闭
  • Blot：自定义块/行内元素，可扩展图片、视频、自定义组件
  • 两套内置主题：
    • snow：带完整工具栏（最常用）
    • bubble：悬浮气泡工具栏，选中文本弹出

3. API友好

可以按文本索引直接读写、修改内容、监听文本变更事件，不用解析混乱HTML。

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: { toolbar: true }
})
quill.getContents()      // 获取Delta
quill.root.innerHTML     // 获取HTML
quill.on('text‑change',(delta)=>{}) //监听内容变化

4. 跨浏览器一致性

抹平不同浏览器contentEditable的行为差异，输出结果稳定统一。

生态

  • 原生 Vanilla JS，无框架绑定；社区封装：vue‑quill、react‑quill等
  • 独立库：quill‑delta，Delta格式可脱离编辑器单独使用，用于协同编辑服务端计算。

优点

✅ 完全免费开源，无商业收费版本
✅ API简洁，上手快，文档完善
✅ Delta结构化数据，方便存储、对比、协同编辑
✅ 模块化，可裁剪，包体积不大
✅ 自定义Blot机制，嵌入自定义内容能力强

缺点与局限

❌ 官方主线迭代放缓，2.x版本推进较慢
❌ 表格原生能力弱，不支持单元格合并、拖拽调整列宽，需要第三方插件
❌ 没有原生代码块高亮、斜杠命令、AI能力
❌ 粘贴处理存在部分边界坑
❌ 复杂嵌套结构开发成本高

应用场景

评论框、简单文章编辑、公告、笔记、需要协同编辑基础能力的系统

不适合

重度表格、复杂排版、类似Word的复杂文档编辑（优先选 CKEditor / TipTap）

和同类编辑器对比

  • wangEditor5：总体看比 Quill 更好，但不支持移动端
  • CKEditor5：功能完备，大而全，商业版收费
  • TinyMCE：老牌，插件丰富，高级功能付费
  • TipTap：基于ProseMirror，现代，适合重度定制，生态强
吉ICP备15003043号