A Quick Guide to QuillJS

Quill can be a daunting package if you have never developed a WYSIWYG editor or if you are starting to customize one.

If you don’t want to dig through the docs and source code — skim through this guide to get a brief understanding of what each technology is and which ones you may need to use.

To get started — what is Rich Text?

Rich Text is just content that has been formatted and styled and may contain extra things like different formats, embeds, lists, links, etc.

For example, Google Docs is a Rich Text Editor and the words you type and images you insert is the Rich Text.

Ok, what is Quill?

Quill is a Rich Text editor package used by developers who need to build their own WYSIWYG (What you see is what you get) editor.

Let’s go one layer down — what is Parchment?

Parchment is Quill’s Document Model. Quill uses this document to keep track of the content and formatting for your editor. To get more technical, the Parchment document is a tree of nodes called Blots.

What are these Blots?

Blots are the nodes,the basic building blocks, of Parchment. They are abstractions over DOM Nodes. You can build different types of formatting and content options from Parchment’s core blots. For example:

Block Blot — these can be headers, lists, tables, etc

Inline Blot — these can wrap text to be bold, italic, links, etc

Embed Blot— these can be images and video IFrames, etc

What is a Delta?

In Quill, a Delta is a way of representing your document as well as tracking changes made to your document. Your Delta Document will look like a list of insert, remove, format, and other objects.

Delta documents are useful when manipulating your document through the Quill API. They are also useful for storing your editor contents and it’s history.

Or, you can skip the Delta Document stuff and just store the raw HTML of your editor contents as a string.

How does the Toolbar work?

The Toolbar is one of the Quill modules you can add to your editor. You can use the Toolbar Module’s default formatting options or extend it with your own custom formats (Blots).

How do you use QuillJS with React?

I store the Quill editor in a ref so that I can pass it between my React components.

How do I get started?

I would just start with Quill and the toolbar module. You may not need to use Deltas or need to create your own custom Blots.

But, if you find the need to start customizing your Quill editor I will be releasing a few more articles about how I did it — such as adding custom buttons to the Toolbar and creating a FigureBlot for Images with Alt Text and Captions.

Thanks for reading!