In this article, I will explain how to create and add your own quill module. We will do all this by creating such a useful module as a table of contents generator for an article.
There is already something similar on the official website for quill, but it does not cover all the problems that I encountered when creating this module. For example, how to disable the module. I did not find this in the official documentation. And the organization of connecting the module, frankly speaking, also cannot be the same as it was shown. But anyway, a very interesting and informative article. ☜(ﾟヮﾟ☜) Check this out.
Registrating a module and making for him a switcher
Let me start with how we connect (or register) this module. To do this, we will assign the value "modules/table_of_contents" to the first variable, and the second variable will be the name of the initializing function. Like this:
Now to the implementation of the initialization function itself. In order for the table of contents to be generated dynamically, we will connect a function to quill. Which will be called every time the text changes.
Let's connect our custom module to the editor.
Okay, we connected it, but how to disconnect it? (⊙_⊙)？Simply put, it's not possible. At least I didn't figure out how. Or rather, I figured it out, but I'm not sure if this is the right method. Quill has getModule and addModule methods, but it doesn't have deleteModule or removeModule. Which is certainly strange.
Therefore, my solution to this issue is not deleting the module but deleting the event handler itself. In my case, it is RunTableOfContents. On the HTML editor page, you can find a checkbox for enabling and disabling this module. (As you already understood, it does not delete the module but the RunTableOfContents handler.)
Below I will present the code of the handler itself. What is my point? All handlers are stored in the _events variable of emmiter. To add and/or remove a handler, use the addListener (and removeListener) method(s), which accept 3 (4) arguments:
Handler type (for me it is TEXT_CHANGE)
Function name
Context (Always pass quill.emmiter)
A boolean value that is used to run the passed function once.
We are done with connecting and configuring the switcher. Let's take a look at the implementation.
How table of contents are generated and implemented
I want to clarify right away that I did not add the H1 tag because I was primarily creating the tool for myself. And this tag does not participate in the generation of the table of contents. You, in turn, are free to change, rotate, and disassemble the code into anything. No one will stop you (～￣▽￣)～.
Here is the code for the RunTableOfContents handler.
This handler finds the blot where the cursor is currently located and checks its type by tag. If the cursor is on the table of contents tags, i.e. from h2 to h6, it updates the table of contents after deleting the previous one.
For the table of contents, I use a custom formatter. Here's how I implemented and registered it.
And one more thing. I could use CSS selectors for styling, but I thought that it would probably be easier for the reader to perceive this form without the need to take into account cascading styles.
Conclusions and other notes
In fact, for the correct operation of this module, it is necessary to perform additional cleaning of the editor. Since my custom formatter is not fully implemented. I perform cleaning in the loadQuill function. Immediately after I have loaded the content onto the page.
Also, I didn't make the table of contents dynamic, that is, I didn't add internal links to the corresponding headings. Sorry, I was too lazy. (ಥ _ ಥ)
And so, the functionality of this module can be found on the page of my rich quill editor. Also, if you suddenly didn't notice, at the very beginning of this article there is a corresponding block with a table of contents. Take a look, admire it (⓿_⓿)
In this article, I will tell you about kinds of quill blots and quill blocks, their differencies, how they are used (including an examples of realisation those blots, blocks). Also, …
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 you how to create custom buttons for your quill editor. You will also learn how to add a drop-down list for the same quill …
Used termins
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.
jQuery ⟶ Is a fast, small, and feature-rich JavaScript library that simplifies the process of handling HTML document traversal and manipulation, event handling, animation, and Ajax interactions for rapid web development. It provides an easy-to-use API that works across a variety of browsers, enabling developers to create dynamic and interactive web applications with
Related questions
What hosting provider do you use?
At the moment I am using beget. So far I'm happy with everything.
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.
