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

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

Basic Usage

1. Import QuillModule into your AppModule

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

3. Import your CSS in styles.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.

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.

And then I passed it down to modules input of the 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.

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.

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

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

Mean stack and Full stack Developer. Open to work as freelancer for designing and developing websites.