Angular 8,9 Rich Text Editor using Ngx-Quill Example Tutorial

Rich text editors or What You See Is What You Get editors to provide a full-featured textarea where users can do text formating, add multi-media content, use emojis use text heading change text size or color, etc.

In this tutorial, we will learn How to add a Rich Text editor in the Angular application by using a very popular and expert plugin named Quill. The Quill Rich text editor provides many extended features as well like AutoSave, Mentions, Image Resizer, Multiple themes options and many more.

Implementation of the Quill edition is very easy and quick, it also supports many extension plugins to integrate with the basic setup. We will discuss all of them with examples here.

Let’s get started!

Version Check

Angular Version 9.0.6

Install Quill Editor

To use Quill editor in Angular project we need to install the Angular directive and Quill library by running following NPM commands given below:

$ npm install ngx-quill
$ npm install quill
$ npm install quill-emoji

Configure for CSS and JS file

In the angular.json file at the project root, update styles and scripts property array as shown below:

...
            "styles": [
              "src/styles.scss",
              "./node_modules/quill/dist/quill.core.css",
              "./node_modules/quill/dist/quill.bubble.css",
              "./node_modules/quill/dist/quill.snow.css",
              "./node_modules/quill-emoji/dist/quill-emoji.css",
              "./node_modules/quill-mention/dist/quill.mention.min.css",
            ],
            "scripts": [
              "./node_modules/quill/dist/quill.min.js"
            ]
...

Import in App Module

To use Quill in the application, open the app.module.ts file and import the QuillModule then add in imports array as shown below:

// app.module.ts
...

import { QuillModule } from 'ngx-quill'


@NgModule({
  ...
  imports: [
    ...
    QuillModule.forRoot()
  ]
})
export class AppModule { }

Using Quill Editor

After the installation and configuration part. To create the editor in a component we just need to add the <quill-editor> directive. Adding the directive will create the basic Quill editor as shown

    <h1>Simple Quill Editor</h1>

    <quill-editor [styles]="{height: '200px'}"></quill-editor>

Output Events

There are some most used Output events, which can be used as shown below:

<quill-editor 
	[styles]="{height: '200px'}" 
	(onFocus)="focus($event)" 
	(onEditorChanged)="changedEditor($event)"
	(onBlur)="blur($event)" 
	(onEditorCreated)="created($event)"
></quill-editor>

import { Component } from '@angular/core';
import { EditorChangeContent, EditorChangeSelection } from 'ngx-quill'

@Component({
  selector: 'app-quill',
  templateUrl: './quill.component.html',
  styleUrls: ['./quill.component.scss']
})
export class QuillComponent {

  blured = false
  focused = false

  created(event) {
    // tslint:disable-next-line:no-console
    console.log('editor-created', event)
  }

  changedEditor(event: EditorChangeContent | EditorChangeSelection) {
    // tslint:disable-next-line:no-console
    console.log('editor-change', event)
  }

  focus($event) {
    // tslint:disable-next-line:no-console
    console.log('focus', $event)
    this.focused = true
    this.blured = false
  }

  blur($event) {
    // tslint:disable-next-line:no-console
    console.log('blur', $event)
    this.focused = false
    this.blured = true
  }
}

Also Check NGX-Quill with Image Resizer

Using Emojis :D:P;)

To use emojis with Quill editor, we have already installed the quill-emoji package and added the quill-emoji.css. For adding emojis use modules as shown below:

    <quill-editor [(ngModel)]="content" trackChanges="all" [modules]="modules"
        (onEditorCreated)="addBindingCreated($event)">
    </quill-editor>
    <pre><code>{{ content }}</code></pre>

import { Component } from '@angular/core';

import 'quill-emoji/dist/quill-emoji.js'

@Component({
  selector: 'app-quill',
  templateUrl: './quill.component.html',
  styleUrls: ['./quill.component.scss']
})
export class QuillComponent {

  modules = {}
  content = ''
  constructor() {
    this.modules = {
      'emoji-shortname': true,
      'emoji-textarea': true,
      'emoji-toolbar': true,
      'toolbar': [
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        ['blockquote', 'code-block'],

        [{ 'header': 1 }, { 'header': 2 }],               // custom button values
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
        [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
        [{ 'direction': 'rtl' }],                         // text direction

        [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
        [{ 'font': [] }],
        [{ 'align': [] }],

        ['clean'],                                         // remove formatting button

        ['link', 'image', 'video'],                         // link and image, video
        ['emoji']

      ]
    }
  }

  addBindingCreated(quill) {
    quill.keyboard.addBinding({
      key: 'b'
    }, (range, context) => {
      // tslint:disable-next-line:no-console
      console.log('KEYBINDING B', range, context)
    })

    quill.keyboard.addBinding({
      key: 'B',
      shiftKey: true
    }, (range, context) => {
      // tslint:disable-next-line:no-console
      console.log('KEYBINDING SHIFT + B', range, context)
    })
  }
}

Conclusion: Adding rich text editors provides much flexibility to the user to easily format informal in required layouts. Quill editor is an awesome option for such requirements with support for free extensions like emojis, mentions, themes, Image resize, etc.

You can check more details on examples here for Quill Editor.