Quill Text-Editor Implementation in ASP.NET

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:

Quill Text-Editor Implementation in ASP.NET

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.

Quill Text-Editor Implementation in ASP.NETStep3:

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

Quill Text-Editor Implementation in ASP.NET

Step4:

Here is the view of the implemented quill editor

Quill Text-Editor Implementation in ASP.NET

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:

Quill Text-Editor Implementation in ASP.NET

Customization of the editor

Create a toolbar with font-size, font color, and background color:

Quill Text-Editor Implementation in ASP.NET

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.

Quill Text-Editor Implementation in ASP.NET

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
      Quill Text-Editor Implementation in ASP.NET
    • Bubble: It’s a simple tooltip based theme
      Quill Text-Editor Implementation in ASP.NET

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.

search
Blog Categories
Request a quote