How to add a align buttons to the toolbar in quill.js?

@elise_daugherty 

To align buttons in the toolbar in Quill.js, you can use the following steps:

1. Define a custom toolbar with the desired alignment buttons. For example, you can add buttons for left align, center align, and right align like this:

1
2
3
4
5
6
7
8

var toolbarOptions = [
  ['bold', 'italic', 'underline'],        // toggled buttons
  [{ 'align': [] }],
  ['link', 'image'],                      //link and image
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],        // lists
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],        // custom dropdown
  ['clean'],
];

In this example, the align button is added to the toolbar.

1. Initialize Quill with the custom toolbar:

1
2
3
4
5
6

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

Now, the align buttons will be displayed in the toolbar of Quill editor allowing users to align text as per requirement.