Quill Text-Editor Implementation in ASP.NET

18 March 2021

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
    

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.

🔊 Listen