Table of Contents
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
Technology | Description |
---|---|
IDE or Editor | We'll use VS Code, |
Angular | We'll use Angular 9+. Assuming you have basic understanding on Angular |
TypeScript | Assuming you have knowledge on TypeScript |
Quill Js and ngx-quill | We'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
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. You can find out our other useful tech blogs in our website.
Thank You. Have a great day 🙂