Question

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

下面是我的代码

        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来查找要创建的增量对象。然后通过调用quill.setContents（）（http://quilljs.com/docs/api/#setcontents）将下拉菜单中的内容设置为通过上述方法预先计算的Delta。

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

1 个答案: