Quill toolbar alignment buttons

quill
Devin Goble picture Devin Goble · Nov 21, 2017 · Viewed 8.8k times · Source

I'm trying to add alignment buttons to the toolbar. I'm using the method of laying out the toolbar using html elements. What I'd like to know is if it's possible to have alignment buttons represented as discrete buttons on the toolbar instead of being in a dropdown.

All of the examples that I've seen so far use the dropdown approach. Is what I'm after even possible?

Answer

jniegsch picture jniegsch · Nov 30, 2017

I'd suggest using the shorthand in the js for the toolbar, so not using a custom html toolbar. Then by writing 

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

you can define 4 discrete alignment buttons as per the answer here by @jhchen. He also has a nice example here. Otherwise I'd assume you could achieve the same though html (based solely on looking at the source code the shorthand generates):

<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>

However, I would honestly suggest you use the shorthand, it keeps it all nice and clean and it ensures it works. Furthermore, it still allows you to add custom buttons (check this)

Related questions

Convert Quill Delta to HTML

How do I convert Deltas to pure HTML? I'm using Quill as a rich text editor, but I'm not sure how I would display the existing Deltas in a HTML context. Creating multiple Quill instances wouldn't be reasonable, but I …

Read More
How do I post contents of a Quill editor in a form?

I have what I think is a very common scenario. I would normally have this form: <form method="post"> <textarea name="text"></textarea> <input type="submit" value="Save" /> </form> Then …

Read More
How do I retrieve the contents of a Quill text editor

I am using the quill text editor in a javascript app and I need to retrieve the contents of the text editor as a string with the HTML included but the docs are a little sparse on this subject.

Read More