In angular, we have different options to implement Angular Rich Text Editors or Angular wysiwyg. The Rich text editor is widely used to create form posts, comments, messaging applications, blogs, and more. The Rich Text Editor allows us to add or edit content, link, video, image, Youtube, tables, columns,s and more.
The content in the Rich Text editor can be formatted easily and displayed content on the browser. Allows the user to use a wide variety of tools to edit and format rich content and returns valid HTML markup content.
In this tutorial, we had a few objectives and as follows,
- Discuss some of the best Angular Rich Text Editor libraries.
- Examples of Angular Rich Text Editor using the ngx-quill library.
- Example of Angular Rich Text Editor using the NgxEditor library
5 Best Angular Rich Text Editor libraries
As we have discussed that there are plenty of third parties libraries to implement Rich Text Editor. We’ll list here some, that you can select based on your requirement.
| Name | Description |
| ngx-quill | Quill is a free, open-source WYSIWYG editor built for the modern web. This library has 451KB and a weekly download of around 147,529. It also has depend on Quill library also. |
| @kolkov/angular-editor | A simple native WYSIWYG/Rich Text editor for Angular 6-14+. This library has a size of 2.39MB and a weekly download of around 37,794 |
| NgxEditor | This library has a size of 1.36 MB and a weekly download of around 13,042. |
| ng2-ckedior | Use the CKEditor (4.x) WYSIWYG in your Angular application. |
| @ckeditor/ckeditor5-angular | The CKEditor is an open-source modern JavaScript-rich text editor with a modular architecture. |
Setup and configure Angular Rich Text Editor project
Let’s first create our Angular Rich Text Editor project and we have two examples of Rich Text Editor. Before starting an angular project you need to install Nodejs and Angular CLI in your system.
ng new richText-app
cd richText-appFree Angular Rich Text Editor Example using the ngx-quill
We’ll demonstrate Rich Text Editor using the third-party library the ngx-quill. To add ngx-quill successfully on Angular, we have to follow these steps.
- Create an Angular project, install ngx-quill and all its dependency libraries.
- Import QuillModule in the app.module.ts file
- Add quilljs CSS CDN in the index.html file
- Used the <quill-editor></quill-editor> tag in the component.
Here is a screenshot of our Angular Rich Text Editor example.
Let’s create a project, and install the ngx-quill, and all its dependent libraries.
ng new quill-app
cd quill-app
npm install ngx-quill
npm install quill
npm install quill-deltaStep 2: Import the QuillModule in the app.module.ts and let edit the app.module.ts file.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { QuillModule } from 'ngx-quill';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
QuillModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }We need to add a Quill CSS style in the index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>QuillApp</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet" />
</head>
<body>
<app-root></app-root>
</body>
</html>
Let’s add Quill configure in the app.component.ts file
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { QuillEditorComponent } from 'ngx-quill';
import Quill from 'quill';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
@ViewChild('editor') editor: QuillEditorComponent | undefined;
content = '<p>Rich Text Editor Example </p>';
format = 'html';
form: any;
quillConfig = {
toolbar: {
container: [
['bold', 'italic', 'underline', 'strike'],
['code-block'],
[{ header: 1 }, { header: 2 }],
[{ list: 'ordered' }, { list: 'bullet' }],
['clean'],
['link'],
['source'],
],
handlers: {
source: () => {
this.formatChange();
},
},
},
};
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.form = this.fb.group({
editor: this.content,
});
let icons = Quill.import('ui/icons');
icons['source'] = '[source]';
}
formatChange() {
this.format = this.format === 'html' ? 'text' : 'html';
if (this.format === 'text' && this.editor) {
const htmlText = this.form.get('editor').value;
this.editor.quillEditor.setText(htmlText);
} else if (this.format === 'html' && this.editor) {
const htmlText = this.form.get('editor').value;
this.editor.quillEditor.setText('');
this.editor.quillEditor.pasteHTML(0, htmlText);
}
}
onFocus = () => {
console.log('On Focus');
};
onBlur = () => {
console.log('Blurred');
};
}Let’s edit the app.component.html template to demonstrate our four examples of Rich Text editor.
<form [formGroup]="form">
<quill-editor
#editor
formControlName="editor"
placeholder="Enter Text"
[modules]="quillConfig"
format="html"
>
</quill-editor>
</form>
<p>mode: {{ format }}</p>
<div>
<pre>{{ form.value | json }}</pre>
</div>
<router-outlet></router-outlet>
WYSIWYG Angular example using ngx-editor
We’ll demonstrate our second WYSIWYG Angular example using the third-party library ngx-editor. Here we first need to install this library in our project by following the command.
npm install ngx-editorHere is our second Angular Rich Text Editor examples screenshot.
Step 2: Import the NgxEditorModule in the app.module.ts and let edit the app.module.ts file.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgxEditorModule } from 'ngx-editor';
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
NgxEditorModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }We need to import Editor from the ngx-editor the app.component.ts file
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Editor } from 'ngx-editor';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit, OnDestroy {
editor: Editor | undefined;
html = '';
ngOnInit(): void {
this.editor = new Editor();
}
ngOnDestroy(): void {
this.editor?.destroy();
}
}Let’s add the ngx-ediotor and ngx-editor-menu tags inside the component template.
<div class="ngxEditor__wrapper" *ngIf="editor">
<ngx-editor-menu [editor]="editor"> </ngx-editor-menu>
<ngx-editor
[editor]="editor"
[ngModel]="html"
[disabled]="false"
[placeholder]="'Type here...'"
></ngx-editor>
</div>Conclusion
We have completed two examples of how to add an Angular Rich Text Editor to our Angular application using two different third-party libraries ngx-quill and ngx-editor. I hope you had learned something, if so then please share it with others and on social networks, this will encourage me to add more content. Follow me on my GitHub collection, I had code on Angular, react, and Ionic framework.
Related posts
- How to add an Angular signature pad?
- How to install Angular material?
- How to implement CKEditor in Angular?
- How to implement Angular material grid .?
- How to implement an Angular bootstrap table with pagination and filter?
- How to implement an Angular search filter in Angular?
- How to calculate base64 image size in Angular
- How to install Angular material?
- How to use to implement HighCharts Angular?
