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

Javascript 如何在quill.js的工具栏中创建自定义下拉列表,javascript,dropdown,quill,Javascript,Dropdown,Quill,我正在使用quill.js在我的项目中创建一个编辑器。迄今为止,我已成功地将quill与我的web项目集成。现在我要做的是在quill工具栏中创建一个自定义下拉列表。该下拉列表将具有以下选项 1) 电子邮件 2) 简单会议描述 选择电子邮件选项后,编辑器将加载电子邮件模板等。 谁能帮我实现这一点 下面是我的代码 var toolbarOptions= [ ['bold','italic','underline','strike'], ['bl

我正在使用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();
    }
  }
}
}
 });  

快速查看一下Quill文档,Quill本身似乎不允许自定义添加到工具栏,尽管这并不意味着您不能这样做

简单的方法是使用javascript手动将下拉列表插入工具栏,就像在另一个元素中插入任何元素一样。另外,将onchange处理程序(请参见:)绑定到下拉列表,以便它与quill接口,并将内容设置为所需的预定义增量对象


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

快速查看quill文档,quill本身似乎不允许自定义添加到工具栏,但这并不意味着您不能这样做

简单的方法是使用javascript手动将下拉列表插入工具栏,就像在另一个元素中插入任何元素一样。另外,将onchange处理程序(请参见:)绑定到下拉列表,以便它与quill接口,并将内容设置为所需的预定义增量对象


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

这并不完全正确。可以通过创建一个blot(扩展其中一个内置blot类)添加自定义工具栏项,将其注册到Quill,然后在编辑器选项中将其指定为工具栏项。然而,如何实现下拉菜单之类的功能还不清楚,这并不完全正确。可以通过创建一个blot(扩展其中一个内置blot类)添加自定义工具栏项,将其注册到Quill,然后在编辑器选项中将其指定为工具栏项。但是,如何实现下拉列表之类的功能还不清楚。