Quill editor formats. How to make a custom one and what types are exist

Clock
24.10.2024
Clock
19.12.2024
Clock
4 minutes
An eye
336
Hearts
0
Connected dots
1
Connected dots
0
Connected dots
0

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:
  1. formats/align
  2. formats/background
  3. formats/blockquote
  4. formats/bold
  5. formats/italic
  6. formats/strike​
  7. formats/underline
  8. formats/code
  9. formats/code-block
  10. formats/code-block-container
  11. formats/code-token
  12. formats/color
  13. formats/direction
  14. formats/font
  15. formats/formula
  16. formats/header
  17. formats/image
  18. formats/indent
  19. formats/link
  20. formats/list
  21. formats/list-container
  22. formats/script
  23. formats/size
  24. formats/table
  25. formats/table-body
  26. formats/table-container
  27. formats/table-row
  28. formats/video
For those who are wondering how I managed to obtain this list, go to my html editor , open the browser console, and type Quill.imports. You will see a comprehensive list of items that you can import and modify to meet your specific needs.
Some of them are only components and cannot be used separately from others. Such formats are:
  1. formats/list-container
  2. formats/table-body
  3. formats/table-container
  4. formats/table-row
  5. formats/code-block
  6. formats/code-block-container
  7. 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:
  1. formats/link
  2. formats/video
  3. formats/image
  4. 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:
let Font = Quill.import('formats/font')
Font.whitelist = ['open-sans', 'roboto-slab', 'advent-pro']
Quill.register(Font, true)

// Yep, size is actually an attributor not formater
let Size = Quill.import('attributors/style/size')
Size.whitelist = ['16px', '14px']
Quill.register(Size, true)
Then add/change formatters on the html page:
<span class="ql-formats">
<select class="ql-font">
<option value="open-sans" selected>Open Sans</option>
<option value="advent-pro">Advent Pro</option>
<option value="roboto-slab">Roboto Slab</option>
</select>
<select class="ql-size">
<option value="16px" selected>16px</option>
<option value="14px">14px</option>
</select>
</span>
Now, you need to add the following styles:
/* Font stuff */
#toolbar-container .ql-font span[data-label="Open Sans"]::before {
font-family: var(--family-main_font);
}
#toolbar-container .ql-font span[data-label="Advent Pro"]::before {
font-family: var(--family-acent_font);
}
#toolbar-container .ql-font span[data-label="Roboto Slab"]::before {
font-family: var(--family-title_font);
}

.ql-font-open-sans {
font-family: var(--family-main_font);
}

.ql-font-advent-pro {
font-family: var(--family-acent_font);
}

.ql-font-roboto-slab {
font-family: var(--family-title_font);
}

/*Size stuff */
#toolbar-container .ql-size span[data-value="16px"]::before {
font-size: var(--size-main_font);
}
#toolbar-container .ql-size span[data-value="14px"]::before {
font-size: var(--size-mini_font);
}

.ql-size-16px {
font-size: var(--size-main_font) !important;
}

.ql-size-14px {
font-size: var(--size-mini_font) !important;
}
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.
const quill = new Quill('#editor', {
modules: {
syntax: true,
clipboard: true,
table: true, // Include appropriet table module
toolbar: {
container: '#toolbar-container',
}
},
theme: 'snow',
});
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.
let Link = Quill.import('formats/link')
class InternalLink extends Link {
constructor(scroll, domNode){
super(scroll, domNode);
domNode.addEventListener('click', (ev) => {
domNode.setAttribute('ref', 'me')
domNode.classList.add('internal_link')
})
}
}
InternalLink.blotName = 'internal-link'
Quill.register({'formats/internal-link': InternalLink})
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:
<span class="ql-formats">
<button class="ql-internal-link"></button>
</span>
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:
var icons = Quill.import("ui/icons");
icons["internal-link"] = readFile(`${PATH}PostEditor/img/paragraph.svg`)
This is important; quill uses svg files, and you need to send not the path to the file but its contents to this icon dictionary.
I wrote a corresponding function for reading the contents of any files. I will leave an example of implementation below.
function readFile(file) {
var rawFile = new XMLHttpRequest();
var result = ""
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function () {
if(rawFile.readyState === 4) {
if(rawFile.status === 200 || rawFile.status == 0) {
result = rawFile.responseText;
}
}
}
rawFile.send(null);
return result
}
heart
cloud
cloud
cloud
message

Comments

(0)
captcha
Send
It's empty now. Be the first (oﾟvﾟ)ノ

Other

Similar articles

All about quill blots

Clock
24.10.2024
In this article, I will tell you about kinds of quill blots, their differencies, how they are used (including an examples of realisation those blots). Also, here you will find …

Quill tooltip, how to make your own. Example on links

Clock
25.10.2024
In this article, you will find an example of how to implement your own Quill tooltip. And you will get how this even works. As an example, a tooltip will …