How to create custom toolbar buttons in quilljs?

Member

by larissa , in category: Javascript , 7 months ago

How to create custom toolbar buttons in quilljs?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by darion , 5 months ago

@larissa 

To create custom toolbar buttons in QuillJS, follow these steps:

  1. Define the custom toolbar button in the Quill configuration:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
var quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: {
      container: [
        ['bold', 'italic', 'underline'],
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
        ['link', 'image'],
        [{ 'custom-button': 'Custom Button' }] // Define the custom button here
      ],
      handlers: {
        'custom-button': function() {
          // Add custom button handler logic here
          alert('Custom button clicked!');
        }
      }
    }
  }
});


  1. Customize the appearance and functionality of the custom button as needed within the handlers object in the toolbar configuration.
  2. Add CSS styling to the custom button if desired:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
.ql-custom-button {
  background-color: #3498db;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}

.ql-custom-button:hover {
  background-color: #2980b9;
}


  1. You can also add specific class names to the button for more styling options in the CSS file:
1
2
3
4
5
quill.getModule('toolbar').addHandler('custom-button', function() {
    // Custom button logic
});
var customButton = document.querySelector('.ql-custom-button');
customButton.classList.add('new-class');


  1. Test the custom toolbar button in the Quill editor and make any necessary adjustments to the styling or functionality as needed.