How to create own format buttons in quill.js?
How to create own format buttons in quill.js?
1 answer
by
samara ,
6 months ago
@orpha
To create custom format buttons in Quill.js, you can follow these steps:
- 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
];
|
- 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';
|
- 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.