Adding a button to the toolbar is very simple. Quill has a special dictionary where it stores icons for its interface. To access this dictionary, import:
Now you can get and save any SVG icon. To add your own icon, you need to save its content. To read the content of any file, I created the corresponding readFile function:
After that, you can use it. But how, you ask? Quill uses special names. In order for the icon to be applied, you need to add the appropriate class selector. Specifically, in my example, it will look like this:
To make the button at least somewhat useful, you can attach a special handler to it. This handler has exactly the same name as the button name. This is how this handler is added:
How to add a drop-down list for quill toolbar
The drop-down list is a bit more complicated, and I'll explain why. The thing is that quill actively relies on CSS selectors, and without proper style settings, you won't get anywhere. Plus, I think you might need a couple of my tricks to make the selectors work correctly.
The HTML code will look like this:
Next, you need to add some styles. You may not have to add them, because this may be a feature of MY site, but if nothing is displayed, add these styles:
Now everything works, but not really. You can notice how the default element does not change. Perhaps somewhere deep in the source code of quill this can be somehow fixed and configured, but I did not find such an opportunity. Therefore, let's setup a handler, just like for the first case with a single button:
It is not necessary to put the ID attribute, but this is the simplest way you can tweak the drop-down list in quill. The value in this case is the value of the attribute of the <option> tag.
And that's all for now. I hope the article was useful for you. Also you can find all types of custom buttons on my quill editor web tool Bye（＾∀＾●）ﾉｼ
In this article, I will analyze the types of quilljs formats and explain some of the nuances of working with tables, fonts, images, and video. I will also show how …
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 …
In this article I will show how to make custom quill module for an editors. This module will generate the table of contents of the article. I will also show …
Used termins
Web design ⟶ Is the process of creating and designing websites and web applications that are accessible, user-friendly, and visually appealing. It encompasses various aspects, including layout, color schemes, typography, graphics, and user experience (UX). Here are some key components of web design, such as: Layout and Structure, Visual Design, Responsive Design ...
Javascript ⟶ Is a high-level, interpreted programming language that is commonly used for web development. It is an essential part of web applications, enabling interactive features and dynamic content on websites.
JSON (JavaScript Object Notation) ⟶ Stands for JavaScript Object Notation, is a lightweight data interchange format that is easy for humans to read and write, and easy for machines to parse and generate. It is primarily used to transmit data between a server and a web application as an alternative to XML.
Website ⟶ Is defined as a collection of related web pages that are typically identified by a common domain name and published on at least one web server. Websites can serve various purposes and can include anything from personal blogs to business sites, e-commerce platforms, or informational resources.
Related questions
What is a quill text editor
This is a text editor based on the WYSIWYG principle (What you see is what you get). It is lightweight and easy to modify the JS framework. Perfectly fitting for any website needs.
How does quill works
To be able to work the quill, divide a text into blots and save them in a special format called delta. This format is very similar to JSON. Modification and editing are managed by Quill modules and formatters, with no dependencies from the markup language; in most cases, this is HTML.
