How to use Quilljs Editor in Angular 15

Quill.js is a very useful text editor designed for web applications. It's a user-friendly interface for creating and formatting rich text content including support for various text styles, fonts, colors, and embedding multimedia elements like images and videos. That is similar to rich text editors.

Approach to use Quilljs in Angular

1. Install Dependencies: Use npm or yarn to install Quill.js and its Angular wrapper (ngx-quill).
2. Import QuillModule: Import QuillModule from ngx-quill in your Angular module and add it to the imports array.
3. Use Quill Editor Component: Place the <quill-editor> component provided ngx-quill in your component's HTML template to use the editor.
4. Access Editor Content: Bind a variable to the editor's content using ngModel in your component and access it to handle the editor's content.
5. Customize and Style (Optional): Customize the Quill editor's toolbar, formats, and styles to fit your application's requirements, and apply custom styles as needed.

Steps to Create the Application

Step 1: Install Angular CLI globally:

npm install -g @angular/cli@15

Step 2: Create a new Angular project.

ng new my-quill-app

Step 3: Install Quill.js

npm install quill

Folder Structure:

Ensure that the package.json file of the Angular project contains the necessary dependencies:

 "dependencies": {
    "@angular/animations": "^15.2.0",
    "@angular/common": "^15.2.0",
    "@angular/compiler": "^15.2.0",
    "@angular/core": "^15.2.0",
    "@angular/forms": "^15.2.0",
    "@angular/platform-browser": "^15.2.0",
    "@angular/platform-browser-dynamic": "^15.2.0",
    "@angular/router": "^15.2.0",
    "quill": "^2.0.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },

Manually Integrating Quills

This approach involves directly importing Quilljs and setting it up within your Angular component. It offers more flexibility but requires more manual configuration.

npm install quill --save

Now, Only change app.component.html file and app.component.ts file.

HTML

<!-- app.component.html -->

<h2>Quilljs Editor in Angular 15 | Geeksforgeek</h2>
<div #editorContainer class="editor-container"></div>

JavaScript

//app.component.ts

import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";
import Quill from "quill";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit {
    @ViewChild("editorContainer", { static: true })
    editorContainer: ElementRef | null = null;

    editor: Quill | undefined;

    ngOnInit() {
        console.log("ngOnInit called!");

        if (this.editorContainer) {
            try {
                this.editor = new Quill(this.editorContainer.nativeElement, {
                    modules: {
                        toolbar: [
                            [{ header: [1, 2, false] }],
                            ["bold", "italic", "underline", "strike"],
                            [{ list: "ordered" }, { list: "bullet" }],
                            ["link", "image", "video"],
                            [{ align: [] }],
                            [{ color: [] }, { background: [] }],
                            ["clean"],
                        ],
                    },
                    theme: "snow",
                });
            } catch (error) {
                console.error("Error creating Quill editor:", error);
            }
        } else {
            console.error("Element with #editorContainer not found!");
        }
    }

    getEditorContent() {
        if (this.editor) {
            return this.editor.root.innerHTML;
        }
        return "";
    }
}

To start the application run command:-

ng serve

Output: