如何在 quill.js 的工具栏中创建自定义下拉菜单

Question

我正在使用 quill.js 在我的项目中创建一个编辑器。到目前为止，我已经成功地将 quill 与我的 web 项目集成。现在我想做的是在 quill 工具栏中创建一个自定义下拉列表。下拉列表将有以下选项 1)电子邮件 2)简单的会议说明 选择电子邮件选项时，编辑器会加载电子邮件模板等。 任何人都可以帮助我实现这一目标....

下面是我的代码

        var toolbarOptions=
     [
       ['bold','italic','underline','strike'],
       ['blockquote','code-block'],
       [{ 'header': 1 }, { 'header': 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', {
       theme: 'snow',
       placeholder: 'Compose an epic message...',
       readOnly: false,
       modules: {
       history: {
       delay: 2000,
       userOnly: true
        },
    toolbar: {
  container: toolbarOptions,
  handlers: {
    undo: function(value) {
      this.quill.history.undo();
    },
    redo: function(value) {
      this.quill.history.redo();
    }
  }
}
}
 });  

Answer 1

快速浏览一下 Quill 文档，Quill 本身似乎不允许自定义添加到工具栏，但这并不意味着您不能这样做。

执行此操作的简单方法是使用 javascript 手动将下拉菜单插入工具栏，就像在另一个元素中插入任何元素一样。此外，将 onchange 处理程序（请参阅：Dropdown using javascript onchange）绑定到下拉列表，以便它与 quill 接口并将内容设置为您想要的预定义 Delta 对象。

您可以通过首先在普通的 Quill 编辑器中将其写出然后调用 quill.getContents() 并将其转换为 JSON 来查找要创建的 delta 对象。然后通过调用 quill.setContents() (http://quilljs.com/docs/api/#setcontents) 将下拉更改后的内容设置为您通过上述方法预先计算的 Delta。