Using Quill to Build a WYSIWYG HTML Editor [Step-by-Step Tutorial]
Remember how basic the Facebook status update used to be?
Now, that same space contains an array of sophisticated text styling options that let users fully express what’s on their minds. This evolution has been driven by rich-text editors like Quill, which allow visitors to fully customize their content: from embedding photos and videos to adding emoticons. In this article, I’ll share a step by step guide to installing and customizing this open-source tool, In this article, I’ll share a step-by-step guide to installing and customizing this open-source tool available for the front-end community.
Table Of Contents
I recently found myself in need of a simple, yet extendable, WYSIWYG HTML editor. A fully functional text editor is a complex piece of software, and writing one from scratch would not have been the best use of my time. I’m a big believer in not reinventing the wheel and making use of other people’s open-source code. But this mindset requires its own skillset: knowing how to quickly and efficiently evaluate options.
What Is Quill?
Quill.js is a JavaScript library that provides developers with a powerful, easy-to-use tool for building rich text editors on the web. With Quill, you can easily format text, add images and videos, and create custom, interactive content. The library is lightweight and easy to use, making it a popular choice for developers who want to add rich text editing capabilities to their web applications.
WYSIWYG Editor Options
The first thing I did was to Google ’WYSIWYG Editor’. As expected, the results were overwhelming. I found dozens of different options, in various states of maintenance and quality:
Alloy Editor, Aloha Editor, CKEditor, Content Tools, Etherpad, Froala, grande.js, jodit, Medium Editor, Medium.js, Mobiledoc Kit, Pell, Pen Editor, ProseMirror, Quill.js, Squire, Scribe, Slate JS, Substance, TinyMCE, Trix, Trumbowyg, and wysihtml.
