quill自定义工具栏

Quill 是一个功能强大的富文本编辑器，可以通过自定义工具栏来满足不同的需求。以下是一些自定义 Quill 工具栏的方法：

1. 添加按钮：你可以通过 `toolbar` 配置项来添加按钮。例如，要添加一个加粗按钮，可以将以下代码添加到 Quill 的初始化配置中：

var toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // 加粗、斜体、下划线、删除线
  ['blockquote', 'code-block'],                      // 引用、代码块
  [{ 'header': 1 }, { 'header': 2 }],                // 标题1、标题2
  [{ 'list': 'ordered' }, { 'list': 'bullet' }],     // 有序列表、无序列表
  [{ 'script': 'sub' }, { 'script': 'super' }],      // 下标、上标
  [{ 'indent': '-1' }, { 'indent': '+1' }],          // 减少缩进、增加缩进
  [{ 'direction': 'rtl' }],                          // 文本方向
  [{ 'size': ['small', false, 'large', 'huge'] }],   // 字体大小
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],          // 自定义标题
  [{ 'color': [] }, { 'background': [] }],           // 字体颜色、背景颜色
  [{ 'font': [] }],                                  // 字体
  [{ 'align': [] }],                                 // 对齐方式
  ['clean']                                          // 清除格式
];

var quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow'
});

2. 自定义按钮：如果想要添加一个自定义按钮，可以使用 Quill 的 `CustomToolbar` 插件。首先，要在页面中引入该插件的 JavaScript 文件：

<script src="path/to/quill.custom-toolbar.min.js"></script>

然后，通过以下代码来创建一个自定义按钮：

var customButton = document.createElement('button');
customButton.innerHTML = 'Custom Button';
customButton.addEventListener('click', function() {
  // 在这里添加按钮点击后的逻辑
});

quill.getModule('toolbar').addHandler('customButton', function(value) {
  if (value) {
    customButton.classList.add('ql-active');
  } else {
    customButton.classList.remove('ql-active');
  }
});

quill.getModule('toolbar').addControl('customButton');

这样就可以在工具栏上添加一个名为 "Custom Button" 的自定义按钮了。

以上是一些常见的自定义 Quill 工具栏的方法，你可以根据自己的需求进行进一步定制。希望对你有所帮助！如有更多问题，请继续提问。