Angular 12 WYSIWYG HTML Rich Text Editor | Quill Editor


In this blog post, We are going to learn How to integrate ngx-quill in Angular 11/12 version.

ngx-quill is a popular npm library provides rich WYSIWYG editor.

What is WYSIWYG  Editor?

It is abbreviated as What You See Is What You Get. It is a UI component used to create/design documents online, you can see the output of the document online. This enables the developer to not write a code for layout and only focus on actual content.

There are a lot of open source frameworks in which we can create a WYSIWYG rich text editor online in Angular Applications.

angular wysiwyg Rich text editor ngx-quilljs

Following are some of the popular Angular WYSIWYG editors

  • ngx-quill WYSIWYG Editor
  • Angular Froala WYSIWYG Editor 
  • Angular - CKEditor component
  • ngx-editor

Quill JS  Wysiwyg rich text editor

Quill is a javascript opensource framework for WYSIWYG rich text editor. It is a very popular editor for javascript and jquery frameworks.

ngx-quill is an angular version of QuillJS framework. It supports all angular 2/4/5/6 versions.

ngx-quill  tutorials

In the below sections, It covers the features, notes and examples and angular versions.

Features and notes

  • It is based on custom modules, Which can configure or extend the modules  Example, can configure pre-built-in toolbar or custom toolbar
  • Supports bubble/snow theme styles, Default CSS themes are snow
  • Supports Angular Two way binding using ngModel
  • Can override inbuilt styles using custom CSS styles
  • Inbuilt events - onEditorCreated - this will be called when the editor is created its instance. onContentChanged - this will be fired when content is modified or updated. onSelectionChanged - selected content update event.

Integration QuillJS in Angular Application

Let’s see the sequence of step by step for create an angular application, adding npm library and integration of quillJS into Angular app

Create Angular Application using ng cli command

Angular CLI is an Application generator for creating project structure. This includes generation of typescript configuration, component and test files.

First, Check angular cli is installed or not using ng –version comamnd.

B:\>ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 12.0.3
Node: 14.17.0
Package Manager: npm 7.11.1
OS: win32 x64

Angular: 12.0.3
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.3
@angular-devkit/build-angular   12.0.3
@angular-devkit/core            12.0.3
@angular-devkit/schematics      12.0.3
@schematics/angular             12.0.3
rxjs                            6.6.7
typescript                      4.2.4

Next, Create an angular application using ng new command

B:\>ng new angular-app
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS

You can start Server by ng serve command,

It starts webserver and app is accesable localhost:4200

Add ngx-quill and quill npm to application

ngx-quill is an angular module for the Quill Rich Text editor that is available as a npm package library. QuillJs is a javascript framework for wysiwyg editor.

Because the QuillJs framework is a dependent of ngx-quill.

Both libraries must be installed in the application.

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

This installs ngx-quill and quill package in node_modules and added both of these as a dependency in package.json of a project

"dependencies": {  
    "ngx-quill": "^14.0.0",  
    "quill": "^1.3.7"  
 }  

Import QuillModule in Angular application

The below code shows how to import Third party module into Application module. To make use of third-party modules, First import module

import { BrowserModule } from '@angular/platform-browser';  
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';  
import { AppComponent } from './app.component';  
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';   
import { QuillModule } from 'ngx-quill';  
  
@NgModule({  
  declarations: [  
    AppComponent  
  ],  
  imports: [  
    BrowserModule,  
    BrowserAnimationsModule,  
    QuillModule, // Add Quill Angular WYSIWYG Editor  
  ],  
  providers: [],  
  bootstrap: [AppComponent],  
  schemas:  
        [CUSTOM_ELEMENTS_SCHEMA]  
  
})  
export class AppModule { }  

import quill.snow.min.css cdn style in index.html

This framework has styles which you have to integrate into angular app.

You can either copy stylesheets to src/assets folder and include in angular.json or include Quill CDN URL in index.xml

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

Html Template component changes : We are going to add in HTML template file
app.component.html

<div style="text-align:center">  
   <h1>  
    Primeng Quill WYSIWYG Component Example  
</h1>  
</div>  
<quill-editor>  
<div quill-editor-toolbar>  
<span class="ql-formats">  
  <button class="ql-bold" [title]="'Bold'"></button>  
</span>  
<span class="ql-formats">  
  <select class="ql-align" [title]="'Aligment'">  
    <option selected></option>  
    <option value="center"></option>  
    <option value="right"></option>  
    <option value="justify"></option>  
  </select>  
  <select class="ql-align" [title]="'Aligment2'">  
    <option selected></option>  
    <option value="center"></option>  
    <option value="right"></option>  
    <option value="justify"></option>  
  </select>  
</span>  
</div>  
</quill-editor>  

Start Development server using ng serve command. This starts angular project and listening at 4200 Output: angular wysiwyg Rich text editor quill

Supported Angular Versions 

  • Angular 2 and 4 - ngx-quill supports less than equal 1.6.0 version 
  • Angular 5 - ngx-quill supports greater than 1.6.0 version 
  • Angular 10/11/12-  ngx-quill supports greater than equal 3.7.0 version. 

The above example uses the 3.7.0 version.

Conclusion

We have completed the integration of quill wysiwyg text editor into angular application, In this tutorials, Installed quillJS npm library and learned to create rich text editor.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.