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

by elise_daugherty , in category: Javascript , a month ago

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

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by deron , a month ago

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