クールツールバーの整列ボタン

Question

ツールバーに整列ボタンを追加しようとしています。私はhtml要素を使用してツールバーをレイアウトする方法を使用しています。私が知りたいのは、ドロップダウンの代わりにツールバー上の個別のボタンとして整列ボタンを表示することが可能な場合です。

私がこれまでに見た例のすべてでは、ドロップダウンアプローチを使用しています。私は後にできることも可能ですか？

Answer 1

カスタムボタンを追加することができます：

<button class="ql-align" value="center"> 

var quill = new Quill('#editor', { 
 
    theme: 'snow', 
 
    modules: { 
 
    toolbar: '#toolbar' 
 
    } 
 
});

<link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet"> 
 
<script src="https://cdn.quilljs.com/1.3.4/quill.js"></script> 
 

 
<div id="toolbar"> 
 
    <span class="ql-formats"> 
 
    <button class="ql-align" value=""></button> 
 
    <button class="ql-align" value="center"></button> 
 
    <button class="ql-align" value="right"></button> 
 
    <button class="ql-align" value="justify"></button> 
 
    </span> 
 
</div> 
 
<div id="editor"> 
 
    <p>Hello World!</p> 
 
    <p>Some initial <strong>bold</strong> text</p> 
 
    <p><br></p> 
 
</div>

Answer 2

私は、ツールバーのjsの略語を使用することをお勧めします。カスタムhtmlツールバーを使用しないでください。その後

toolbar: [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }] 

を書き込むことによって、あなたは、@jhchenで答えhereあたりとして4つの離散配置ボタンを定義することができます。彼はまた、いい例のhereを持っています。そうでなければ、私はあなたがHTMLかかわらず、同じことを達成できると仮定したい（単に速記が生成するソースコードを見に基づいて）：しかし

<span class="ql-formats"> 
    <button type="button" class="ql-align" value=""> 
    <svg viewBox="0 0 18 18"> 
     <line class="ql-stroke" x1="3" x2="15" y1="9" y2="9"></line> 
     <line class="ql-stroke" x1="3" x2="13" y1="14" y2="14"></line> 
     <line class="ql-stroke" x1="3" x2="9" y1="4" y2="4"></line> 
    </svg> 
    </button> 
    <button type="button" class="ql-align" value="center"> 
    <svg viewBox="0 0 18 18"> 
     <line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line> 
     <line class="ql-stroke" x1="14" x2="4" y1="14" y2="14"></line> 
     <line class="ql-stroke" x1="12" x2="6" y1="4" y2="4"></line> 
    </svg> 
    </button> 
    <button type="button" class="ql-align" value="right"> 
    <svg viewBox="0 0 18 18"> 
     <line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line> 
     <line class="ql-stroke" x1="15" x2="5" y1="14" y2="14"></line> 
     <line class="ql-stroke" x1="15" x2="9" y1="4" y2="4"></line> 
    </svg> 
    </button> 
    <button type="button" class="ql-align" value="justify"> 
    <svg viewBox="0 0 18 18"> 
     <line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line> 
     <line class="ql-stroke" x1="15" x2="3" y1="14" y2="14"></line> 
     <line class="ql-stroke" x1="15" x2="3" y1="4" y2="4"></line> 
    </svg> 
    </button> 
</span> 

、私は正直にあなたが速記を使用することをお勧め、それはそれはすべての素敵保ち、きれいにし、それが動作することを保証します。さらに、それはまだあなたはそれがそうみたいにvalue属性を追加することによって、自分のボタンだとしてあなたは、ドロップダウンオプションを追加することができます（check this）