Skip to content
Menu
Almighty tricks
  • About
  • Contact
Almighty tricks
quill angular

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

Posted on October 19, 2020March 25, 2022
Facebook0Tweet0LinkedIn0Email0

Table of Contents

  • Introduction
  • Technology Required
  • Let’s get started
    • Create Angular App
    • Install ngx-quill package
    • Configure styles.css
    • Configure angular.json
    • Import quill js in app.module.ts file
    • Impalement free wysiwyg editor in angular using ngx-quill package
  • Conclusion

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.

quill angular

Technology Required

TechnologyDescription
IDE or EditorWe'll use VS Code,
Angular We'll use Angular 9+. Assuming you have basic understanding on Angular
TypeScriptAssuming you have knowledge on TypeScript
Quill Js and ngx-quillWe'll use npm package for quill js

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

angular app

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

ngx-quill

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>

preview

 

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.

emoji

 

select 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. You can find out our other useful tech blogs in our website.

Thank You. Have a great day 🙂

 

Facebook0Tweet0LinkedIn0Email0

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • Build Rest Api In Node And Express With Easy Example
  • Create middleware in Node JS & Express JS with easy examples
  • Build python flask rest api with example | python tutorial 1
  • Code highlighting using ngx-quill with easy example in angular 9
  • Ngx-quill image resize with easy example using angular 9
©2022 Almighty tricks | Powered by SuperbThemes & WordPress
Share this ArticleLike this article? Email it to a friend!

Email sent!