How to Create Own Format Buttons In Quill.js?

4 minutes read

To create your own format buttons in Quill.js, you will need to use the Quill API to define custom formats and toolbar modules. You can create a new format by configuring a new class with specific properties and behaviors, then register it with Quill. Once the custom format is registered, you can add a button for it in the toolbar by defining a custom toolbar module. This module will include the new format button and specify its appearance and functionality. By following these steps, you can create your own format buttons in Quill.js and customize the editor to suit your needs.


How to handle user input with custom format buttons in quill.js?

To handle user input with custom format buttons in Quill.js, you first need to define the custom format buttons in the Quill toolbar by creating a module that adds the buttons to the toolbar. Here is an example of how you can do this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var toolbarOptions = [
  [{ 'header': [1, 2, 3, false] }],
  ['bold', 'italic', 'underline'],
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  ['link', 'image'],
  ['customFormatButton']
];

Quill.register('modules/customFormat', function(quill, options) {
  var CustomFormat = quill.import('formats/link');
  
  class CustomFormatButton extends CustomFormat {
    static create(value) {
      let node = super.create(value);
      node.classList.add('ql-customFormatButton');
      return node;
    }
  }
  
  CustomFormatButton.blotName = 'customFormatButton';
  CustomFormatButton.className = 'ql-customFormatButton';
  CustomFormatButton.tagName = 'a';

  return CustomFormatButton;
});

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


In the above code, we have added a custom format button called 'CustomFormatButton' to the Quill toolbar. We have defined this custom format button as a subclass of the 'link' format, meaning it will behave similarly to a link but with some custom styling.


To handle user input with this custom format button, you can listen for the 'selection-change' event in Quill and check if the current selection contains the custom format button. You can then perform any custom logic based on this information.

1
2
3
4
5
6
7
8
9
quill.on('selection-change', function(range, oldRange, source) {
  if (range) {
    var formats = quill.getFormat(range.index, range.length);
    if (formats['customFormatButton']) {
      // handle user input with the custom format button
      console.log('User has selected the custom format button');
    }
  }
});


With the custom format button and the selection-change event listener in place, you can now customize how user input with the custom format button is handled in Quill.js.


How to assign functions to custom format buttons in quill.js?

To assign functions to custom format buttons in Quill.js, you can follow these steps:

  1. Define your custom format button in the toolbar options when initializing Quill:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
var quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      [{ 'header': '1' }, { 'header': '2' }],
      ['bold', 'italic', 'underline'],
      [{ 'color': [] }],
      ['custom-format-button'] // Define your custom format button here
    ]
  }
});


  1. Create a custom format handler function that will be executed when the custom format button is clicked:
1
2
3
4
5
6
7
Quill.register('formats/custom-format-button', {
  // Add proper logic to handle this event
  'click' : function(customFormatButton) {
    // Execute your custom logic here
    quill.format('bold', true);
  }
});


  1. Make sure the custom format button is displayed in the toolbar and specify the custom format handler function to be executed when the button is clicked:
1
2
3
4
var customButton = document.querySelector('.ql-custom-format-button');
customButton.addEventListener('click', function() {
  Quill.find(this).format('customButton', 'yourCustomFormatValue');
});


By following these steps, you can assign functions to custom format buttons in Quill.js and define custom format functionality to enhance the editing experience.


How to style custom format buttons in quill.js?

To style custom format buttons in Quill.js, you can use CSS to target and style the buttons. Quill.js provides class names for each button that you can use to style them.


Here is an example of how you can style custom format buttons in Quill.js:

  1. Identify the class name of the custom format button you want to style. You can find the class name by inspecting the button element in your browser's developer tools.
  2. Use the class name to target the button in your CSS and apply your desired styles. For example, if the class name of your custom format button is "myButton", you can style it like this:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.ql-myButton {
  background-color: blue;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

.ql-myButton:hover {
  background-color: darkblue;
}


  1. You can also style the button when it is active or focused by using the :active and :focus pseudo-classes:
1
2
3
4
5
.ql-myButton:active,
.ql-myButton:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}


  1. Finally, make sure to include your custom CSS styles in your project's stylesheet or in a style tag within your HTML document.


With these steps, you can easily style custom format buttons in Quill.js to match the design of your application.

Facebook Twitter LinkedIn Telegram

Related Posts:

To add align buttons to the toolbar in Quill.js, you can create custom toolbar buttons for left align, center align, and right align functionalities. You can use the Quill toolbar module to add these custom buttons to the toolbar. Define the toolbar options wi...
To install Quill.js in Angular.js, you can start by including the Quill library in your project. You can do this by npm installing the Quill package using the command 'npm install quill'.Next, you will need to include the Quill stylesheet and scripts i...
To change the dropdown text in Quill.js, you can modify the options in the dropdown menu by editing the configuration settings of the Quill editor. You can customize the text displayed in the dropdown menu for various formatting options such as font size, font...
To implement the quill.js emoji blot, first, you need to add the emoji module to your quill editor setup. Next, you will need to create a custom emoji blot that extends the Inline class of quill and define the emoji format and render method. Make sure to inclu...
To merge two contents versions with Quill.js, you can follow these steps:First, you need to define the two versions of the content that you want to merge. Then, you can use the Quill Delta format to convert the content into a Delta object.Next, you can use the...