How to create custom toolbar buttons in quilljs?

 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
 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
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');