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

什么是 Quill

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

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

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

为开发者打造：通过简单的 API 精细访问编辑器的内容、更改和事件，同时使用 JSON 作为统一输入和输出，一致且准确的工作跨平台性：支持台式机、平板电脑和手机上的所有现代浏览器，具有跨平台体验相同的一致行为和生成 HTML 的一致性大小型项目都合适 ：Quill 可用于大小型项目，随着产品需求增长可以轻松自定义或添加自己的扩展

Quill 专为编辑和字符而设计，并在以自然文本为中心的单元之上构建 API。 比如：要确定某些内容是否为粗体，Quill 不需要遍历 DOM 来查找 <b> 或 <strong> 节点或字体粗细 (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 引入外部资源<script src="https://cdn.jsdelivr.net/npm/quill@2.0.0/dist/quill.js"></script><link href="https://cdn.jsdelivr.net/npm/quill@2.0.0/dist/quill.snow.css" rel="stylesheet"><div id="editor"> <p>Preset build with <code>snow</code> theme, and some common formats.</p></div><script> // 实例化编辑器 const quill = new Quill('#editor', { theme: 'snow' });</script>

当然，如果项目使用 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 <b> tag as boldquill.clipboard.addMatcher('B', (node, delta) => { return delta.compose(new Delta().retain(delta.length(), { bold: true }));});

开发者还可以通过 Quill.register 方法注册模块、主题或格式，稍后使用 Quill.import 进行检索：

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

更多关于 Quill 的高级用法和特性可以参考文末资料，本文不再过多展开。

参考资料

https://quilljs.com/docs/why-quill

https://quilljs.com/docs/modules/clipboard

https://github.com/quilljs/quill