A look at Quill.js

October 01, 2016

Preface

Thanks to a codepen blog post, I recently discovered Quill: An API Driven Rich Text Editor ? it sounds all kinds of interesting, but I have no idea how it works, follow me as I dig into quill and check it out with some code samples.

Note - Challenges: I gave myself little challenges you are welcome to try if you want to recreate my own learning curve.

Let's Quill

Challenge :Import Quill and create a basic implementation

See the Pen Exploring Quill pt.1 by Eugenio - Keno - Leon (@k3no) on CodePen.

And that’s that, not much to it, import CSS and JS files, and fire it up with a script, what we end up with is a nice looking Text area and some buttons to format it ( things like headings, links etc).

So now that we have a text editor, how do we get the content out ? let’s find out:

Challenge :Find out how to get our precious content out of Quill

See the Pen Exploring Quill pt.2 by Eugenio - Keno - Leon (@k3no) on CodePen.

As you can see from the above pen, you have 2 basic ways of getting content out, the first one getContents() gives you something called a Delta which basically is a JSON object that represents your content and formats, you can also just get the Text with getText() and off you go. Notice that to retrieve the html you just need vanilla js.

Customizing Quill

Now that we know the basics, let’s start figuring out how to customize quill.

Challenge :Figure out what can be customized and how

There seems to be a few ways of customizing Quill, the first and most accessible, is through both the options passed to the Quill constructor (which in turn have options of their own), and with css by overriding quills themes

See the Pen Exploring Quill pt.3 by Eugenio - Keno - Leon (@k3no) on CodePen.

Nice,out of the box Quill has a lot to offer and is easily customizable both through the API and native modules, but lets try something more,how hard would it be to add a custom button ?

Challenge :Figure out how to add a custom button to quill

See the Pen Exploring Quill pt.4 by Eugenio - Keno - Leon (@k3no) on CodePen.

How about 3 emoji buttons =)

Quill provides a simple framework for adding buttons to your toolbars just add them to your toolbar configuration and style them with css, the behavior on the other hand needs some extra vanilla js coding supplemented with quills methods, check the code sample.

Let's go deeper

This just seems to be the the tip of the quill iceberg you can also add functionality via modules, let’s try that:

Challenge :Figure out how to add a custom module to quill

See the Pen Exploring Quill pt.5 by Eugenio - Keno - Leon (@k3no) on CodePen.

You could write a module for search, custom formatting or whatever your text editor requires.

Deeper !

On top of the above customizations, Quill seems to work with another library: Parchment, that somehow allows even greater customization, let’s check that out.

Challenge :Figure out what parchment is and how it works with quill

See the Pen Exploring Quill pt. 6 by Eugenio - Keno - Leon (@k3no) on CodePen.

Parchment (Quills Document Model) allows you even greater levels of customization by exposing the core formats quill uses and allowing you to add new behavior,you can even add your own nodes if you wish, this extra deep functionality does require a bigger technical knowledge, but might be what you need for a complex project.

Conclusion

Quill.js is an awesome library for adding a feature rich text editor to your project, you can be up and running in no time, and if you wish to extend or customize Quill in any way, there are multiple ways of doing so.

TL;DR:

A text area on steroids, with mutant powers and people skills