Edupala

Comprehensive Full Stack Development Tutorial: Learn Ionic, Angular, React, React Native, and Node.js with JavaScript

5 Best Angular Rich Text Editor libraries

Angular Rich Text Editor

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,

  1. Discuss some of the best Angular Rich Text Editor libraries.
  2. Examples of Angular Rich Text Editor using the ngx-quill library.
  3. 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.

NameDescription
ngx-quillQuill 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-editorA 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
NgxEditorThis library has a size of 1.36 MB and a weekly download of around 13,042.
ng2-ckediorUse the CKEditor (4.x) WYSIWYG in your Angular application.
@ckeditor/ckeditor5-angularThe CKEditor is an open-source modern JavaScript-rich text editor with a modular architecture.
Angular Rich Text Editor

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-app

Free 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.

  1. Create an Angular project, install ngx-quill and all its dependency libraries.
  2. Import QuillModule in the app.module.ts file
  3. Add quilljs CSS CDN in the index.html file
  4. Used the <quill-editor></quill-editor> tag in the component.

Here is a screenshot of our Angular Rich Text Editor example.

Angular Rich Text Editor example using ngx-quill
Angular Rich Text Editor example using ngx-quill

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-delta

Step 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-editor

Here is our second Angular Rich Text Editor examples screenshot.

wysiwyg angular example
wysiwyg Angular

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

5 Best Angular Rich Text Editor libraries

Leave a Reply

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

Scroll to top