Creating a rich text editor with Quill

In a recent project, I was tasked with implementing functionality into an application to allow admin users the ability to add/edit descriptions of sections of work. These sections form part of a workbook that the regular users must complete. The admin users may want to add bullet points, hyperlinks as well as bold or italic text to the aforementioned descriptions - so a simple out of the box text input would not suffice.

After some research, I opted to use Quill due to its apparently simplicity and high level of customisation. This blog post will detail the basic setup and usage of Quill, in an Aurelia web project which uses typescript.

The above shows a typescript file for description rows. On this file there is a method that opens an edit modal for a description, it is this modal that uses a quill editor so that the user can edit the description. In the activate method the Quill options are set using a method located in a helper file (see below). In the openEditDescriptionWindow method the Quill editor is initialised.

A helper method is used to set the Quill editor options, primarily because I want to set the bounds on each use of the editor - this is passed in as a parameter and corresponds to the id of the divider that houses the editor.

The only addition to the html file is the divider shown above. The class is set to quill-editor and the id is set to description-text - though this should be different for each use of the Quill editor. Although not shown here, it is crucial to add a reference to the CSS files that the editor uses.

Summary

Quill certainly gives an aesthetically pleasing rich text editor, which is simple to extend and adapt. Given I used a typescript project for this, some of the setup had to be a little messy (see let Quill: any = quill above). Despite this, I certainly wouldn't be put off using this technology in the future.