Text Editor in Angular with ngx-quill

In modern web applications, having a text editor can enhance the user experience by allowing users to format their text content easily. One popular choice for integrating a text editor in Angular applications is ngx-quill. In this blog post, we will walk through the steps to set up and use ngx-quill in your Angular project.

What is ngx-quill?

ngx-quill is an Angular wrapper for the Quill rich text editor. Quill is a powerful, flexible, and modern rich text editor that provides a clean API, extensibility, and a fantastic user experience. By using ngx-quill, you can easily integrate Quill into your Angular applications with minimal effort.

Let’s Start to Create Our first text editor

1. Install ngx-quill

First, you need to install ngx-quill and its peer dependencies. Open your terminal and navigate to your Angular project directory, then run the following command:

npm i ngx-quill

2. Configure Angular Module

After installing ngx-quill, you need to configure it in your Angular module. Open your app.module.ts file and import QuillModule from ngx-quill.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { QuillModule } from 'ngx-quill';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    QuillModule.forRoot()  // Add QuillModule here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Import quill themes CSS into styles.scss

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

3. Use ngx-quill in Your Component

Now that ngx-quill is configured in your Angular module, you can use it in your components. Let’s add a Quill editor to a component. Open the app.component.html file and add the following code:

<div class="editor-container">
  <quill-editor [(ngModel)]="editorContent"></quill-editor>
</div>

In the corresponding app.component.ts file, define the editorContent property:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  editorContent: string = '';
}

Don’t forget to import FormsModule and ReactiveFormsModule in your app.module.ts:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // other imports
    FormsModule,
    ReactiveFormsModule,
  ],
})

“Hurray! We have successfully set up our text editor.”

4. Customize Quill Editor (Optional)

You can customize the Quill editor to fit your needs. ngx-quill allows you to configure various options, such as the toolbar, theme, and more. Here’s an example of how to customize the toolbar in your app.component.html:

<div class="editor-container">
  <quill-editor [(ngModel)]="editorContent"
                [modules]="editormodules"
                theme="snow">
  </quill-editor>
</div>

In your app.component.ts, define the editorModules property:

import { Component } from '@angular/core';

export const editorModules = {
  toolbar: [
    ['bold', 'italic', 'underline'],        // toggled buttons
    ['blockquote', 'code-block'],

    [{ 'header': 1 }, { 'header': 2 }],     // custom button values
    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
    [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
    [{ 'direction': 'rtl' }],                         // text direction

    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
    [{ 'font': [] }],
    [{ 'align': [] }],

    ['clean']                                         // remove formatting button
  ]
};

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  editorContent: string = '';
  editormodules=editorModules;

}

Conclusion

Integrating a rich text editor in your Angular application can significantly enhance the user experience by providing advanced text formatting options. ngx-quill is an excellent choice for this purpose, offering seamless integration with Angular and the powerful features of the Quill editor.

By following the steps outlined in this blog post, you can easily set up and customize ngx-quill in your Angular projects. Happy coding!

For more information and advanced usage, you can visit the ngx-quill documentation.

Happy Coding :)