“WYSIWYG What? How Quill Took My Angular Project to the Next Level”

Recently, I’ve been working on a new full-stack project that includes Maven, Spring Boot, MySQL, and Angular. It’s a kind of news/guides/issues web app for my job team, which works on tech support. I believe this app will be a valuable resource for us, and I can’t wait to share it with the team.

I started by creating a form with fields, including a body/description that could contain text.

While testing the app, I found out the limitations of a plain text form. I wanted a text field like the one we use to write emails, where I could change the font size, colour, add links or images, etc. After a little search on the web, I discovered the existence of the WYSIWYG rich editor. It’s an acronym for “What You See Is What You Get” and provides exactly what I needed for my app.

So I searched for an Angular library to help me with that, and I found Quill! From their website: “Quill is a free, open-source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.” Perfect to accomplish my task.

1. Installation and Setup:

I installed the ngx-quill package to include the Quill editor in my Angular project. In the terminal:

npm install ngx-quill

npm install quill

I added imports in the AppModule to make use of the Quill editor component.

import { QuillModule } from 'ngx-quill';
//. . .
imports: [
    //. .,
    QuillModule.forRoot()
  ],
   //. . .

 

2. Setting Up the Form:

I included the <quill-editor> tag inside the form and bound it to a form control named ‘body’.

<div>    
 <quill-editor class="quill-editor" formControlName="body"></quill-editor>
</div>

 

3. Styling the Editor and the angular.json:

 Angular.json

 "styles": [
              "src/styles.css",
              "./node_modules/quill/dist/quill.core.css",
              "./node_modules/quill/dist/quill.bubble.css",
              "./node_modules/quill/dist/quill.snow.css",        
            ],
            "scripts": [
              "./node_modules/quill/dist/quill.min.js"
            ]
          },

I imported css in styles.css

@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.bubble.css';
@import '~quill/dist/quill.snow.css';

In my post component css

.quill-editor {
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 5px;
}

4. Dealing with TypeScript Errors:

I encountered TypeScript errors related to missing type definitions for Quill and installed @types/quill to resolve them.

npm install --save-dev @types/quill

5. Handling HTML Content:

The content from the Quill editor was in HTML format, and it needed to be rendered safely on the front end. I utilised Angular’s DomSanitizer to safely render the HTML content.

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';


constructor(
    //. . .
    //. . .
    private sanitizer: DomSanitizer
  ) {
	//. . .

  sanitizeHtml(html: string): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }

6. Backend Integration:

The Post model in my backend was already set up to handle the HTML content as a string, so no changes were required there. I’m thinking of changing the body column DataTyoe from VARCHAR to LONGTEXT.

7. Final Touches and Troubleshooting:

I made adjustments in the form to replace a standard textarea with the Quill editor and in the table that lists the “posts.”

<ng-container matColumnDef="body">
          <th mat-header-cell *matHeaderCellDef>Body</th>
          <td mat-cell *matCellDef="let post" [innerHTML]="sanitizeHtml(post.body)"></td>
        </ng-container>

This is the result 😊

In the image below, you’ll find a nice comparison illustrating the significant difference that integrating the Quill WYSIWYG editor has made in the post list of the application.

On row number 8, you see the post list without HTML content, which appears plain and unformatted. 

On row number 9, the transformation is clear. With the Quill editor’s HTML content integration, the posts are visually appealing. Texts are styled; links, or other rich content elements add importance to each post.