Rich Text Editing

We often need to introduce rich text editing when developing platforms with lots of user input, such as blogs or news platforms. Rich text editors, such as LibreOffice, have existed since the creation of GUIs and have been a critical feature of many operating systems. Originally, HTML was meant to display rich text only, which is why headings, paragraphs, lists, tables, and text formatting tags have existed since the dawn of HTML, with CSS and JavaScript added later.

Standard <textarea> tags don't offer rich text formatting out of the box though. One of the main reasons is complexity. Developers would need to be able to configure it according to the application's needs and restrictions. They need to be able to style it, configure the image upload if desired, and make sure the content doesn't contain any malicious code.

There are many solutions to this. Large libraries, such as Quill, offer all the functionality we need. In addition, they are configurable to a great extent and can be enhanced with additional plugins. Most of them offer Vue implementations, but the one offered by Quill is easy to use and has very few catches. It’s called VueQuill.

Installation and usage

To install VueQuill, we execute npm i -s @vueup/vue-quill@beta and register the component either globally or locally, as illustrated below. Like many other plugins, VueQuill also offers CSS, which we need to import.