quill.jsのツールバーでカスタムドロップダウンを作成する方法

Question

私はquill.jsを使用してプロジェクトにエディタを作成しています。これまでのところ、私はweb-project.Nowでquillを正常に統合しました。 Doillツールバーにカスタムドロップダウンを作成します。 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に変換します。次に、上記の方法で事前に計算したデルタにドロップダウン変更後の内容を設定するには、quill.setContents（）（http://quilljs.com/docs/api/#setcontents）を呼び出します。