Free WYSIWYG Editor For Angular 9+ (quill js / ngx-quill)

Introduction

Ngx-quill package is use to implement WYSIWYG HTML Text Editor. WYSIWYG HTML Text Editors are widely used to create blogs, email templates, online ticket design etc. WYSIWYG HTML Text Editor is also known as rich text editor. It provides a full featured textarea where users can do  text formatting, inserting images, emoji, multimedia contents etc. In this post we’ll create quill js editor example, quill js editor is a powerful WYSIWYG editor with all type of HTML functionalities. Quill js is a free WYSIWYG HTML Text Editor.

Technology Required

[table id=2 /]

We’ll use ngx-quill package to implement free WYSIWYG editor in angular. quill js is very easy to integrate with any javascript library. In this post I’ll guide you how you can implement quill js in angular application, resizing the image, code syntax editor.

Let’s get started

Create Angular App

Open command prompt or terminal and run below command to create angular app.

ng new quill-editor

Wait for dependencies installation, then open the project in an editor, I am using VS Code editor 🙂

Run below command to run the app

ng serve

You can access the application on http://localhost:4200/ address

Install ngx-quill package

npm install quill –-save

npm install ngx-quill –save

Configure styles.css

@import "~quill/dist/quill.bubble.css"; 
@import "~quill/dist/quill.snow.css";

Configure angular.json

"scripts": [
"node_modules/quill/dist/quill.min.js"
]

Import quill js in app.module.ts file

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { QuillModule } from 'ngx-quill';
...
imports: [
...
FormsModule,
ReactiveFormsModule,
QuillModule.forRoot(),
]
...
export class AppModule { }

We are going to use app.component files to implement the text editor. You can use same code in different components according to your requirements. So I am going to remove codes from app.components.html which are created by default.

Impalement free wysiwyg editor in angular using ngx-quill package

< quill-editor> tag is used for implementing quill js editor, This tag required some attributes to show the properties or buttons to formatting the texts, images, multimedia data etc. Please follow the below codes to implement the basic editor.

app.component.html

<div>
<!-- Text Editor -->
<quill-editor #editor [modules]="modules" (onEditorCreated)="editorCreated($event)" placeholder="Enter Text"
(onSelectionChanged)="onSelectionChanged($event)" (onContentChanged)="onContentChanged($event)" name="content"
formControlName="content" [(ngModel)]="htmlString"></quill-editor>
</div>

app.component.css

Specify the height of the editor

::ng-deep .ql-editor {
height: 250px !important;
}

app.component.ts

import { Component, ViewChild } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild('editor') editor;
htmlString: string = '';
quillEditorRef: any;
modules = {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
[{ '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'], // link and image, video
]
};
onSelectionChanged = (event) => {}
onContentChanged = (event) => {
  this.htmlString = event.html;
}
editorCreated(quill: any) {}
}

Output

Great you have implemented quill js editor example 🙂

Now the question is how we can see the preview. So let’s implement preview part for quill js. < quill-view-html> is used to see the preview of contents. It requires content attribute to bind the content from editor.

app.component.html

<div>
<!-- Text Editor -->
<quill-editor #editor [modules]="modules" (onEditorCreated)="editorCreated($event)" placeholder="Enter Text"
(onSelectionChanged)="onSelectionChanged($event)" (onContentChanged)="onContentChanged($event)" name="content"
formControlName="content" [(ngModel)]="htmlString"></quill-editor>
</div>
<div>
<h2><u>Preview</u></h2>
<!-- Preview -->
<quill-view-html [content]="htmlString"></quill-view-html>
</div>

You might be wondering that how I implemented emoji in text editor. It’s very simple, If you are using Chrome then right click inside editor and select emoji and chose your favorite emoji.

Conclusion

ngx-quill package is allowing us to implement free wysiwyg editor in angular. This post is a simple quill js editor example. We can use other rich text editor like CKEditor, Froala editors, but I found quill js is very simple and easy wysiwyg html text editors.

If you found this post useful, then please share this post with your friends and colleague.

Let us know if you are facing any issue during the implementation.

Thank You. Have a great day 🙂