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.
<!-- app.component.html -->
<h2>Quilljs Editor in Angular 15 | Geeksforgeek</h2>
<div #editorContainer class="editor-container"></div>
//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:
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.
Contact Us