Angular 15 WYSIWYG HTML Rich Text Editor | Quill Editor

Angular 15 WYSIWYG HTML Rich Text Editor | Quill Editor

Learn How to integrate ngx-quill in the Angular 15/12 version.

ngx-quill is a popular npm library that provides a 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.

It enables the developer to not write 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 open-source framework for WYSIWYG rich text editor. It is a very popular editor for javascript and jquery frameworks.

ngx-quill is an angular version of the QuillJS framework. It supports all Angular 15/13 and the latest versions.

Angular ngx-quill tutorials

The below sections cover the features, notes and examples, and angular versions.

Features and notes

  • It is based on custom modules, Which can configure or extend the modules, For Example, can configure a 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 step by step for creating an angular application, adding npm library, and integrating quillJS into the Angular app.

Create Angular Application using ng cli command:

Angular CLI is an Application generator for creating project structures. It includes the generation of typescript configuration, components, and test files.

First, Check whether angular cli is installed or not using the ng —version command.

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 the 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 a web server and the app is accessible at localhost:4200.

Add ngx quill dependencies application

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

Because the QuillJs framework is dependent on ngx-quill.

Both libraries must be installed in the application.

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

It installs the ngx-quill and quill packages in node_modules and added both of these as a dependency in the 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 a Third-party module into the Application module. To make use of third-party modules, the 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 that you have to integrate into the angular app.

You can either copy stylesheets to the src/assets folder and include them in angular.json or include the 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 addin 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 an 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 the quill WYSIWYG text editor into the angular application, In these tutorials, Installed the quillJS npm library and learned to create a rich text editor.