Quill:现代富文本编辑器,模块化架构随心扩展

本文约 800 字，阅读完大约 3 分钟。

HELLO ，这里是大熊的收藏录。

分享各种开源插件应用场景、使用方法、demo示例~

产品一句话：加个富文本编辑器，而且 UI 要尽量还原设计稿，就问你头疼不？？

这种需求最麻烦的地方不是编辑器能不能用，而是需求后面衍生出来的各种细节问题。

用现成的？可以啊，但一些常见的编辑器都有点缺陷，比如： UEditor 功能不少但太老了、TinyMCE 太笨重、WangEditor 好用但功能有限。

如果你有上面这些顾虑，那么 Quill 就值得一试了！

Quill

专为现代网络打造的富文本编辑器，凭借其模块化架构和富有表现力的 API 足以满足各种刁钻的产品需求！

项目仓库：https://github.com/slab/quillnpm 包：https://www.npmjs.com/package/quill官网：https://quilljs.com/英文文档：https://quilljs.com/docs/中文文档： 暂无star 数量： 47.1k (47119)开源协议： BSD-3-Clausenpm 周下载量： 360 万左右jsDelivr 月请求次数： 3 亿左右（排 114 名）最新版本： 2.0.3兼容性： Browser文件大小： 209 kB (Gzip 60.4 kB)依赖数量： 4 个更新状态： 一年前

在使用时要注意，如果你项目中用了 CSS 的通配符 * 选择器去重置样式，那么大概率加粗、斜体、下划线之类的样式会失效！

安装

1、npm 安装

1npm i quill

导入依赖

12345// ESMimport Quill from 'quill'// CommonJSconst Quill = require('quill')

2、浏览器端引入

123456789<!-- 传统 script 引入 --><linkhref="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css"rel="stylesheet"><scriptsrc="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script><!-- ESM --><linkhref="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css"rel="stylesheet"><scripttype="module">  import Quill from 'https://cdn.jsdelivr.net/npm/quill@2.0.3/+esm'</script>

示例

1、基础富文本编辑器

123456789101112131415161718192021<linkhref="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css"rel="stylesheet"><divid="editor"style="height: 300px;">Hello 前端路引!</div><scripttype="module">  import Quill from 'https://cdn.jsdelivr.net/npm/quill@2.0.3/+esm'const quill = new Quill('#editor', {    theme: 'snow',    placeholder: '开始编写...',    modules: {      toolbar: [        ['bold', 'italic', 'underline', 'strike'],        ['blockquote', 'code-block'],        [{ header: 1 }, { header: 2 }],        [{ list: 'ordered' }, { list: 'bullet' }],        [{ color: [] }, { background: [] }],        ['link', 'image'],        ['clean']      ]    }  })</script>

运行效果：

2、获取内容与事件监听

123456789101112131415161718192021222324252627282930<linkhref="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css"rel="stylesheet"><divid="editor"style="height: 300px;"></div><buttonid="getHtml">获取 HTML</button><buttonid="getText">获取纯文本</button><divid="output"style="width: 100%;"></div><scriptsrc="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script><script>const quill = new Quill('#editor', {    theme: 'snow',    placeholder: '输入内容试试...'  })// 监听文本变化  quill.on('text-change', () => {console.log('内容已变化，字数：', quill.getLength())  })const out = document.querySelector('#output')// 获取 HTMLdocument.querySelector('#getHtml').addEventListener('click', () => {    out.textContent = quill.root.innerHTML  })// 获取纯文本document.querySelector('#getText').addEventListener('click', () => {    out.textContent = quill.getText()  })</script>

运行效果：

最后

不过要注意点儿 Quill 的中文生态一般，文档只有英文，遇到问题得自己翻 GitHub Issues，不过现在 AI 翻译那么强大，这都是小问题。

另外它没有内置表格功能，需要表格的话得用第三方模块 quill-better-table。