Ask Question Sign In Sign Up

How to create own format buttons in quill.js?

Member

by orpha , in category: Javascript , 2 months ago

How to create own format buttons in quill.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by samara , 2 months ago

@orpha 

To create custom format buttons in Quill.js, you can follow these steps:

  1. Add a button to your toolbar: First, you'll need to add a button to the Quill toolbar for your custom format. You can use the Quill toolbar API to customize the toolbar and add a button with a custom icon or label.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

var toolbarOptions = [
  [{ 'header': [1, 2, 3, 4, false] }],
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['link', 'image'],
  ['code-block'],
  [{'list': 'ordered'}, {'list': 'bullet'}],
  [{'align': []}],
  ['clean'],                                         // remove formatting button
  [{'format-custom': 'custom'}]                      // custom format button
];


  1. Define the custom format handler: Next, you'll need to define a custom handler for your format button. This handler will be responsible for applying the custom format to the selected text when the button is clicked.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

Quill.register('formats/custom', {
  class CustomFormat extends Quill.import('blots/inline') {
    static blotName = 'custom';
    static tagName = 'span';
    static className = 'custom';
  }
});

Quill.register('formats/formatCustom', FormatCustom, true);

const CustomButton = Quill.import('ui/formats/button');
CustomButton.className = 'ql-custom';
CustomButton.value = 'custom';


  1. Add the custom format button to the Quill instance: Finally, you'll need to add the custom format button to the Quill instance by specifying the custom format name in the toolbar options.
1
2
3
4
5
6
7
8

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


With these steps, you should be able to create your own custom format buttons in Quill.js and apply custom formatting to your text.

Related Threads:

How to add a align buttons to the toolbar in quill.js?
How to create a grouped buttons in tailwinds css?
How to create custom toolbar buttons in quilljs?
How to create a custom drop-down in the toolbar of quill.js?
How to add custom fonts to the quill.js editor?
How to create jwt token in symfony 5?