What is Quill?
- Quill is a free, open-source modern rich text editor built for the modern web application. With its descriptive API and modular configuration, it is completely customizable to fit any need.
- It was known for its compatibility and extensibility. It was created by Jason Chen and Byron Milligan and maintained by Slab in some sort of time-interval.
Key Features
- Quill allows us to customize the options used for the text editor according to our needs.
- Quill is known for its flexibility and extensibility.
How to implement Quill?
Step1:
Include Quill.js and Quill.snow.css to an HTML:
Step2:
Add a “div” tag with the “id” attribute and assign some name to it and include it inside a “body” tag with some static height. This is the place where our rich text-editor is going to display on the user interface.
Step3:
Now add a script section in the style tag and here create a new object of the quill and then add the id of the div in which we defined our editor to display
Step4:
Here is the view of the implemented quill editor
Various API used in Quill-Implementation
- Content
- Formatting
- Selection
- Editor
- Events
- Model
- Extension
Followings are the function comes under each API group for the various purpose:
Customization of the editor
Create a toolbar with font-size, font color, and background color:
Modules in Quill
- Toolbar
- Keyboard
- History
- Clipboard
- Syntax
Modules make quill’s behavior and functionality customized. There are various officially supported modules available to use while implementing it.
Themes in Quill
- It allows us to make our editor look attractive and interactive as well with minimal effort in no time
- There are two types of officially supported themes available in quill:
- Snow: It’s a clean flat toolbar theme
- Bubble: It’s a simple tooltip based theme
- Snow: It’s a clean flat toolbar theme
Summary
In this article, we got to know about the various new things like API, modules, themes supported by the quill.js. It also provides a good overview of the customization of the quill editor by modifying the content of the module according to our needs.
