
How to make table of contents generator as an quill module
29.10.2024
74
0
0
0
0
Content
h2
Introduction
h2
Registrating a module and making for him a switcher
h2
How table of contents are generated and implemented
h2
Conclusions and other notes
Introduction
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 (⓿_⓿)
Comments
(0)
Send
It's empty now. Be the first (o゚v゚)ノ