QuillJS is a powerful rich text editor, with good scalability, rich and convenient API, available for use. Is a lightweight, redevelopable editor framework. Suitable for any complex custom scenario.

Why QuillJS

Due to the business needs of the company, we need to find a low-level rich text editor that is easy to expand. Since the project is based on React, draftJS and SlateJS are considered first. The requirements of our project are very complex, and DraftJS always feels bad and easy to jump the cursor. Slatejs feels that some features (drag and drop) are not easy to implement and not as convenient.

Finally, I found QuillJS, which strengthened my choice after finishing a project. The code structure was clear and impressive. Although Quill was used for the first time, it was not easy to understand, detla, blot, and other concepts were easily confused. Official documentation is too simplistic. But source code is the best answer. After reading the source code, at first will not use things, encountered a lot of pits, now can understand. But admittedly, Quill isn’t perfect, and there’s a lot of room for improvement. So I will share my understanding with you, to avoid some detours, too simple use, I will not speak, you can go to the official document, I will from the source point of view, speak more in-depth details. It involves Module development, how to design a custom Module and Blot, how to embed the React component in QuillJS, how to build a sub-edit area, etc., if there is something wrong, please correct it, thank you.

Ii.QuillJS architecture introduction

It can be seen from the above figure that there are five main blocks, which I will introduce from bottom to top:

1.Core Class

This is mainly the core class of QuillJS, including Selection cursor processing, and some base classes such as Mdeule module management base classes. Emitter is used for event processing. It handles the definition of core quill events such as editor-change and text-change events, a typical pubSub model.

** 2. Parchment(Abstract document model) **

Quill does not use the browser’s native DOM document model. It abstracts a set of DOM-based document models by itself. Parchment consists of blots. There are many types of blots for plain text, namely textBlot, blockBlot, inlineBlot, which is inline and can be nested nested. EmbedBlot is used for multimedia pictures, videos and so on, and each Blot has its own life cycle. Parchment is stored in another Git repository. There will be a separate section on Parchment later.

** 3. Modules **

Quill still gives us some basic modules that we can use. Toolbar, table, snippet display, clipboard, upload, keyboard event listener and more. With these basic modules, you can actually use them without custom development.

** 4. Blots(abstract document implementation)**

Parchment defined the basic classes for blotting and some core ShadowBlot classes and interface definitions were also on Parchment. The Blots implementation is on the Quill side. For custom development in Quill, we usually do not directly manipulate the Dom, but do it through blot. Blot provides many dom-like methods and attributes, such as parent (parent node), next(get the next node), prev (previous node), appendChild (add child nodes), etc. It is not strictly a virtual DOM. Each update affects only the current node.

**5.Delta(Json document data described above) **

It maintains the user’s entire operational relationship, albeit as a flat JSON, but it makes clever use of attributes and insertion order to describe structural relationships. We’ll talk more about that in a later section. Here is an example of a delta operation:

Const delta = new delta ().retain(7, {bold:true}).retain(5).insert('White', {color: '# FFF '}).delete(4);Copy the code

Retain (7, {bold:null, ITALic :true}) retain blots with indexes 0 to 7 in the editor and format style bold retain(5) retain blots with indexes 0 to 5 in the editor insert(‘white’, {color: ‘# FFF ‘}) indicates that after the last operation, insert the word ‘white’ and apply format to it. The color # FFF delete(4) indicates that after the last operation, delete four blots

The delta operation has two meanings. First, it describes the entire context of the document, making it easy to roll back and undo.

You can see this in the source code of the History class in CoreClass

Where the last bit of the delta source data is popped out and then updated with updateContents.

Another implication is that quill’s getContents method exports a clean JSON representation of the Delta object structure. It can be stored in mysql or Mongo to recover and save data.

Iii. Conclusion:

In the next section, we will talk about parchment, the life cycle of blot and the basic operation of Blot. And the source tracking blot and what the whole structure looks like.