Quill：Web富文本编辑器介绍-马育民老师

# 介绍

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：
```json
{
  "ops": [
    {"insert":"Hello "},
    {"insert":"World","attributes":{"bold":true}},
    {"insert":"\n"}
  ]
}
```

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

### 3. **API友好**
可以按文本索引直接读写、修改内容、监听文本变更事件，不用解析混乱HTML。
```js
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，现代，适合重度定制，生态强

原文出处：/show_1GW3sHXjg5zx.html