quill 富文本编辑器自定义格式化

最新推荐文章于 2025-06-20 09:54:55 发布

weixin_33895604

最新推荐文章于 2025-06-20 09:54:55 发布

阅读量4.2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5ca8217af265da30827a209c

本文档介绍了如何在QuillJS富文本编辑器中自定义格式化功能，包括基础用法、自定义按钮创建、注册与使用，以及在Vue项目中的实践。通过实例展示了如何插入带特定格式的文本，并在保存时转换为HTML。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

quilljs

现在富文本编辑器轮子太多了，Github 上随便搜一下就有一堆，我需要实现的功能很简单，所以就佛系地选了 quilljs，quilljs 是一个轻量级的富文本编辑器。

链接：

官网：quilljs.com/
Github： github.com/quilljs/qui…
React版本：github.com/zenoamaro/r…
Vue版本：github.com/surmon-chin…

基础功能就不多说了，看文档就好。

主要是记录一下如何在 toolbar 上自定义一个按钮并实现自定义格式化。

toolbar

toolbar 相关文档：quilljs.com/docs/module…

基础用法

可以看到文档中有这么一段代码：

var toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote', 'code-block'],

  [{ 'header': 1 }, { 'header': 2 }],               // custom button values
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
  [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
  [{ 'direction': 'rtl' }],                         // text direction

  [{ 'size'