What is a quill formats and their list
Formats in quill are a set of rules that say how to format a particular blot and what tooltips and styles to use. Quilljs provides a wide range of text formatting types. Types of formats in quill:
- formats/align
- formats/background
- formats/blockquote
- formats/bold
- formats/italic
- formats/strike
- formats/underline
- formats/code
- formats/code-block
- formats/code-block-container
- formats/code-token
- formats/color
- formats/direction
- formats/font
- formats/formula
- formats/header
- formats/image
- formats/indent
- formats/link
- formats/list
- formats/list-container
- formats/script
- formats/size
- formats/table
- formats/table-body
- formats/table-container
- formats/table-row
- formats/video
Some of them are only components and cannot be used separately from others. Such formats are:
- formats/list-container
- formats/table-body
- formats/table-container
- formats/table-row
- formats/code-block
- formats/code-block-container
- formats/code-token
For some, a special tooltip module has been developed, with the help of which some formatters even make sense. This tooltip only works and is configured only for:
- formats/link
- formats/video
- formats/image
- formats/formula
We can jump ahead and say that this tooltip will be useless for any custom editor because it is tightly attached to those 4 formats. And we will have to create it from scratch. Which is what we will do in this article.
A few words about formats
About the font and size formats. Or how to redefine formats with several options
To rewrite and customize your fonts, you will need to work not only with html, but also with css styles. So, first, you need to write down in the white list all the fonts and sizes we need. And of course, register the changes:
Then add/change formatters on the html page:
Now, you need to add the following styles:
After which you will have a working font and size selector.
About tables, formats/table
By default, quill does not provide any interface or tooltip for creating tables. Or rather, you can only create a 1x1 table, which is not very useful. You will have to add the ability to delete and insert rows and columns all by yourself.
To be able to use tables, you first need to connect the appropriate module.
Next, you will need to create either a tooltip or any other interface to interact with the module. Here you can see how I made a tooltip for tables.
About video, formats/video
By default, this formatter supports inserting video via a link to the corresponding resource. Which actually has some advantage over inserting a direct video file.
About images, formats/image
The thing is quill embedding images into the page itself. On the one hand, this is cool; you can immediately see how this image will look on the site, but on the other hand, it greatly increases the weight of the page, which affects the speed, which affects SEO performance. This option does not suit me. Here you can see how I rewrote the image formatter for myself.
Quill custom format, overwriting using link format
It's actually very simple. You just need to follow certain rules. The first and main rule is that the name of the static variable blotName, of the class you inherit from, will be used as a selector when you click it. Now I'll explain using link format as an example.
In this piece of code, I defined a new formatter for internal links. It will simply have an additional class, for styling, for example. Then I changed blotName and pay attention to how I registered the formatter. In fact, this is a new formatter independent from the old one.
What's next? Go to the html page and add the corresponding code to your toolbar:
In order for quill to understand which formatter to use, you need to set the appropriate class name. Also, you will need an icon for the button; you can add it like this:
I wrote a corresponding function for reading the contents of any files. I will leave an example of implementation below.
