Webmasters Gallery

You know rich text editors. They turn simple text fields into some type of text processing environment. Each WordPress blogger uses one, the TinyMCE, which is still standard in the world’s most popular CMS. Quill is a more advanced member of the same species.

Quill 1.0: Open Source and Independent

After about two years, the open source project Quill has finally made it to the stable version 1.0. After this long development time, one of the positive results is the excellent documentation. Smaller and younger projects can barely keep up with that. Good documentation is crucial, especially in the open source area, as it is a common thing that previously very active contributors suddenly lose interest in the project and abandon it.

Quill is a JavaScript solution without any other dependencies, but with its own API. All you need to be able to efficiently work with Quill is located in the JavaScript file, which you integrate into your documents as usual.

How to Add Quill to Your Web App

To equip an element with Quill’s abilities, add the following into your HTML:

1

<div id="editor-container"></div>

After that, you call the script on the element. This is how it looks:

1
2
3
4
5
6
7
8
9
10
11

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow' // or 'bubble'
});

This is an example of what may happen when someone uses the element:

The Small Bit of Code on the Left Allows for the Result on the Right (and a Lot More). (Screenshot: Dr. Web)

As you can already see in the JavaScript source code, it is possible to modularly adjust Quill to the contained element the way you consider to be right. The individual function modules are integrated into the UI with speaking names. This way, your users get the option to format text in bold only if you added bold to the scope of functions.

Quill: Flexible Due to Its Own API

An API lets you create further function modules depending on your needs, and seamlessly integrate them into the UI of Quill. Maybe your web app has to be able to gather CAD drawings, or whatever. Generally, Quill does not need configuration. It works out-of-the-box just fine for most application cases.

Aside from expansion modules for features that Quill doesn’t provide, you are also able to replace some of Quill’s functions with your own, if the given ones are not sufficient. You should set up all modules as separate JavaScript files, but it is also possible to directly add them to Quill, although this isn’t advisable when keeping simple updates in mind.

The option to expand or alter the feature scope of the editor is possible due to one of Quill’s biggest unique characteristics; the DOM abstraction level Parchment. In the Quill blog, you’ll find a detailed presentation of the abilities of Parchment. Learn how you could recreate the UI of the popular publication platform Medium.

You’ll get a good feeling for the modern tool’s flexibility when looking around on the project page’s interactive playground, or by using Codepen.

The developers value the assessment that Quill is very consistent over all platforms, and always works the same way, even being fully functional on tablets and smartphones, as well as solely creating standard HTML. The entire input and output work via JSON.

Quill: Availability and License

Quill is available for the integration into your website via download, but it is also possible to embed it via a CDN ran on Amazon Cloudfront. The source code is available on Github. As it is an open source project, there are no limitations regarding using it. Thus, you can even utilize Quill for commercial projects under the BSD license.