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.
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:
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.
Now that we know the basics, let’s start figuring out how to customize quill.
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
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 ?
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.
This just seems to be the the tip of the quill iceberg you can also add functionality via modules, let’s try that:
You could write a module for search, custom formatting or whatever your text editor requires.
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.
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.
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.
A text area on steroids, with mutant powers and people skills