1

I am using quill.js to create an editor in my project.Hitherto,i have successfully integrated quill with my web-project.Now what i want to do is create a custom dropdown in the quill toolbar.The dropdown will have following options 1)Email 2)Simple Meeting Description When Email-Option is selected,the editor loads a Email Template etc. Can anyone help me in achieving this....

below is my code

        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();
    }
  }
}
}
 });
Jack Dowson
  • 65
  • 1
  • 9
Talha Sarwar
  • 11
  • 4

1 Answers1

0

From a quick look at the Quill documentation, it doesn't appear that Quill by itself allows for custom additions to the toolbar, though that doesn't mean you can't do it.

The easy way to do it would be to use javascript to manually insert the dropdown into the toolbar the same way you would insert any element inside another element. Also, bind an onchange handler (see: Dropdown using javascript onchange ) to the dropdown so that it interfaces with quill and sets the contents to be the predefined Delta object that you want.

You can look up the delta object you want to create by first writing it out in a normal Quill editor and then calling quill.getContents() and then converting that to JSON. Then you set the contents after the dropdown change to the Delta you have precomputed through the above method by calling quill.setContents() (http://quilljs.com/docs/api/#setcontents).

Community
  • 1
  • 1
Michael Tontchev
  • 909
  • 8
  • 23
  • 2
    This isn't entirely true. You can add a custom toolbar item by creating a blot(extend one of the built in blot classes), register it with Quill, then specify it as a toolbar item in the editor options. However, it's definitely not clear how to implement things like dropdowns. – Ten Bitcomb Sep 13 '18 at 19:15