Medium Like Text Editor in Angular (Quill Editor )

Demo Link: https://mehulk05.github.io/Blog-Book/#/create-post

Documentation: https://www.npmjs.com/package/ngx-quill

Rich text editors or What You See Is What You Get editors to provide a full-featured text area where users can do text formating, add multi-media content, use emojis, use text heading change text size or color, etc.

In this tutorial, we will learn How to add a Rich Text editor in the Angular application by using a very popular and expert plugin named Quill. The Quill Rich text editor provides many extended features as well like Autosave, Resize Text headings, giving styles to paragraphs, and a lot more

Implementation of the Quill edition is very easy and quick, it also supports many extension plugins to integrate with the basic setup. We will discuss all of them with examples here.

That’s how a rich text editor looks.

ngx-quill

To build a rich text editor from scratch could take me the same time to make the whole Jira clone application. That’s why I am utilizing ngx-quill.

ngx-quill is an angular module for the Quill Rich Text Editor containing all components you need.

Installation

npm install ngx-quill
npm install quill

For projects using Angular < v5.0.0, please run.

npm install ngx-quill@1.6.0

Basic Usage

1. Import QuillModule into your AppModule

@NgModule({
  imports: [
    ...,
    QuillModule.forRoot()
  ],
  ...
})
class AppModule { ... }

2. Configure for CSS and JS file in angular.json

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

3. Import your CSS in styles.css

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

4. Using Quill Editor

I can now use in the RichTextEditorComponent. I will go ahead and place that HTML in my component template. I set a class name content-editor so that I can style it later.

<quill-editor class="content-editor" [placeholder]="''"> </quill-editor>

See the result. Because quill is a compelling library, the rendered component has a textbox and most of the default toolbar buttons available for us.

My job now is pretty simple to customize the component with only the button that I need and some CSS styling.

5. Toolbar configuration

Below is the current configuration that I use for one toolbar row with some basic commands.

export const QuillConfiguration = {
  toolbar: [
    ['bold', 'italic', 'underline', 'strike'],
    ['blockquote', 'code-block'],
    [{ list: 'ordered' }, { list: 'bullet' }],
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    [{ color: [] }, { background: [] }],
    ['link'],
    ['clean'],
  ],
}

And then I passed it down to modules input of the quill-editor

<quill-editor
  class="content-editor"
  [placeholder]="''"
  [modules]="quillConfiguration"
>
</quill-editor>

That’s the result with lesser command.

Noted that by default, ngx-quill will render a short textarea, and it will automatically expand to fill the height as you type. You might want to set a default min-height. I did set the default 120px.

<quill-editor
  class="content-editor"
  [placeholder]="''"
  [modules]="quillConfiguration"
  [styles]="{'min-height': '120px'}"
>
</quill-editor>

I guess it looks right now. The leftover part is to connect it with a form :)

6. Connect RichTextEditorComponent to a form

ngx-quill provided support for both ReactiveForms and TemplateForm. I shifted only to use ReactiveForms. That's why I will follow a similar approach as the Markdown component to take a FormControl as an Input.

export class RichTextEditorComponent implements OnInit {
  quillConfiguration = QuillConfiguration
  @Input() control: FormControl
  ngOnInit() {
    this.control = this.control ?? new FormControl()
  }
}
<quill-editor
  [formControl]="control"
  [placeholder]="''"
  [modules]="quillConfiguration"
  [styles]="{'min-height': '120px'}"
  class="content-editor"
>
</quill-editor>

See the result when I pair it inside a form. Work perfectly.

7. Output Events with Quill

There are various events that can be handy while using quill editor

<quill-editor 
	[styles]="{height: '200px'}" 
	(onFocus)="focus($event)" 
	(onEditorChanged)="changedEditor($event)"
	(onBlur)="blur($event)" 
	(onEditorCreated)="created($event)"
></quill-editor>
import { Component } from '@angular/core';
import { EditorChangeContent, EditorChangeSelection } from 'ngx-quill'

@Component({
  selector: 'app-quill',
  templateUrl: './quill.component.html',
  styleUrls: ['./quill.component.scss']
})
export class QuillComponent {

  blured = false
  focused = false

  created(event) {
    // tslint:disable-next-line:no-console
    console.log('editor-created', event)
  }

  changedEditor(event: EditorChangeContent | EditorChangeSelection) {
    // tslint:disable-next-line:no-console
    console.log('editor-change', event)
  }

  focus($event) {
    // tslint:disable-next-line:no-console
    console.log('focus', $event)
    this.focused = true
    this.blured = false
  }

  blur($event) {
    // tslint:disable-next-line:no-console
    console.log('blur', $event)
    this.focused = false
    this.blured = true
  }
}

8. Conclusion

Adding rich text editors provides much flexibility to the user to easily format informal in required layouts. Quill editor is an awesome option for such requirements with support for free extensions like emojis, mentions, themes, Image resize, etc.

Also, read

Authentication Using JWT in MEAN Stack

How to Add Medium Blogs on your React App

COVOID 19 Tracker (Statistics) app Using Angular

Medium Like Blogging App Using Angular 9 and Firebase