Quill toolbar alignment buttons

Question

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 1

You can add a dropdown option as it's own button by adding a value attribute to it like so:

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