How to Add Quill Editor in Angular Project

This post describes the steps to integrate Quill Editor in an angular project.

Run the following commands in your angular project directory:

npm install ngx-quill --save
npm install quill --save

Inside app.module.ts or any shared module import the QuillModule

import { QuillModule } from 'ngx-quill';

Add the following in imports array:

QuillModule, // inside app.module.ts or any shared module

Add following in index.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.snow.min.css">

Now add the following where you want to display editor:

<quill-editor></quill-editor> <!--replace existing text areas with this tag and rest will be handled by this-->

Leave a Comment