Ioanni Mitsakis September 30th, 2016

Quill 1.0 – Better Rich Text Editor for Web Apps

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. [caption id="attachment_77970" align="alignnone" width="640"]quill-landing-768x460 Quill's Project Website. (Screenshot: Dr. Web)[/caption]

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:
After that, you call the script on the element. This is how it looks:
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: [caption id="attachment_77969" align="alignnone" width="640"]quill-ergebnis-768x320 The Small Bit of Code on the Left Allows for the Result on the Right (and a Lot More). (Screenshot: Dr. Web)[/caption] 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.

Ioanni Mitsakis

Ioanni Mitsakis is front-end developer at a major European automotive supplier and responsible for the look & feel of their internal cloud-based apps. As his employer works internationally with distributed teams world-wide, a rock-solid development foundation is what Ioanni aims for. He better should ;-)

5 comments

  1. Great looking editor but few problems. If you want to show rendered quill content on screen you have to instantiate quill instance for each text because there is no html export function. Imagine using it for forum when for each content you show you need to spawn quill instance.
    On their github people requested thir basic feature, author aknowledged the problem but refused to fix. For now id stay away from it.

  2. I found this editor really good and useful for my app development. I used to work on traditional editors which are not too friendly but after seeing your editor; i can say this will be in use for long time.

  3. This editor is very useful, so far I have used Froala, but when I read this about Quill I said “I must try it”, now I use it in every project.
    Thanks for sharing this with us!

  4. No doubt Quill is a marvelous and smart text editor for design and development of web applications in a professional way .The most significant advantage of Quill is that it supports the all the modern browsers on desktops, tablets, and phones devices. Now the web app designers can craft the custom web apps rapidly as before.

  5. No rich text editors I have found are built for lightweight extensibility, especially when it comes to realtime support.

Leave a Reply

Your email address will not be published. Required fields are marked *