时隔8年，WYSIWYG 富文本编辑器 Quill 2.0王者归来？

大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 Quill

Quill is a modern WYSIWYG editor built for compatibility and extensibility.

Quill 是一款专为兼容性和可扩展性而构建的现代富文本编辑器，由 Jason Chen 和 Byron Milligan 创建，并由 Slab 积极维护。目前最新发布的是 Quill 2.0 版本，在上一个版本上完全由 TypeScript 重写。

Quill 的特征可以概括为以下几点：

Quill 专为编辑和字符而设计，并在以自然文本为中心的单元之上构建 API。 比如：要确定某些内容是否为粗体，Quill 不需要遍历 DOM 来查找 或 节点或字体粗细 (font-weight) 样式属性 ，只需调用 getFormat(5, 1) 即可。

Quill 所有核心 API 调用都允许使用任意索引和长度进行访问或修改。 其事件 API 还以直观的 JSON 格式报告更改，无需解析 HTML 或 diff DOM 树。

很多开发者或多或少都使用过基于 Quill 开发的产品，比如：Zoom, Grammarly, Figma 等。对于国内广大开发者来说开源 Quill 更是不陌生，比如流行的编辑器 wangEditor

目前 Quill 在 Github 上通过 BSD-3 条款许可证开源，有超过 40.6k 的 star、3.2k 的 fork、178k 的项目依赖量、代码贡献者 140+、妥妥的前端优质开源项目。

如何使用 Quill

Quill 提供了全球分布且可用的 CDN，由 jsDelivr 支持。这是开始使用 Quill 的最便捷方式，并且不需要构建步骤或包管理器。

// 通过 jsDelivr 引入外部资源



  
Preset build with snow theme, and some common formats.

当然，如果项目使用 Webpack 或 Vite 等打包程序，建议通过 npm 安装 Quill：

import Quill from 'quill';
// Or if you only need the core build
// import Quill from 'quill/core';
const quill = new Quill('#editor');

Quill 支持的功能非常丰富，如果要添加历史记录配置，可以通过下面代码快速集成：

const quill = new Quill('#editor', {
  modules: {
    // history 配置是重点
    history: {
      delay: 2000,
      maxStack: 500,
      userOnly: true
    },
  },
  theme: 'snow'
});

如果需要处理 Quill 和外部应用程序之间的复制、剪切和粘贴，可以通过 Clipboard Module 快速添加：

quill.clipboard.addMatcher(Node.TEXT_NODE, (node, delta) => {
  return new Delta().insert(node.data);
});
// Interpret a  tag as bold
quill.clipboard.addMatcher('B', (node, delta) => {
  return delta.compose(new Delta().retain(delta.length(), { bold: true }));
});

Quill.register({
  'formats/custom-format': CustomFormat,
  'modules/custom-module-a': CustomModuleA,
  'modules/custom-module-b': CustomModuleB,
});
Quill.register(CustomFormat);