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

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.

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 :)

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.

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

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.

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store