Как создать пользовательский раскрывающийся список на панели инструментов quill.js

Question

Я использую quill.js для создания редактора в своем проекте. До сих пор я успешно интегрировал перо с моим веб-проектом. Теперь я хочу, чтобы do - создать индивидуальный раскрывающийся список в панели инструментов. В раскрывающемся списке будут указаны следующие параметры: 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. Затем вы устанавливаете содержимое после смены выпадающего списка в Delta, которую вы предварительно вычислили с помощью вышеуказанного метода, вызывая quill.setContents() (http://quilljs.com/docs/api/#setcontents).