Wysiwyg editor for angular4


Angular Problem Overview

Does someone knows a good free wysiwyg editor compatible with angular 4 ?

Froala seems to be good but unfortunately it's not free.

Maybe using angular 4 was not a good idea because it's hard to find a lot of basic things ...

Thank you

Angular Solutions

Solution 1 - Angular

Since I had the same problem, I'm sharing the results of my research here:


demo here

enter image description here


demo here enter image description here

quill.js for angular

demo here

Note: Quill uses JSON to store the data internally, not html.

enter image description here


Theme collection, that features a Quill-based WYSIWYG-editor as well, demo here. Some of themes are free.


A WYSIWYG editor which uses MarkDown rather than HTML, demo here


If your choice was quill.js, you might want to use KillerCodeMonkey's implementation since it is compatible with angular 5.

Solution 2 - Angular

Try this simple but powerful WYSIWYG editor for Andular 6-12 (native)


Note: This native Angular 6+ WYSIWYG editor was created as library.


Demo is here

PR or new features request are welcome.

This editor originally created as part of my corporate project https://online.freicon.ru/, but I extracted it into separate library and post as open source project. I hope this helps someone solve their problems.

Solution 3 - Angular

Thanks @Ronin for sharing your research. Here is my feedback on a couple I tested.


First I tried ngx-editor and was relatively easy to install and use. Only needed ngs-boostrap and fontAwesome as dependencies. Hoever the only drawback I found for my requirements was the adding link widget. This library does not remember the link that you have entered so if you want to change them you need to remove and re-add it. Another limitation was that one could not specify a max Length value.


I ended up using ngx-quill. It has a better way to deal with links as well as the ability to specify max-Length. It was also very easy to install:

npm install ngx-quill
npm install quill  // Needed for CSS styles

import { QuillModule } from 'ngx-quill'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'

  imports: [

class YourModule { ... }

Solution 4 - Angular

You can use ng2-editor. It has many options to manage .

> https://github.com/chymz/ng2-ckeditor

Solution 5 - Angular

I use "ngx-quill" as a WYSIWYG Editor in my Angular4 project.

This is an Angular (>=2) component for rich text editor Quill

angular v4 - ngx-quill <=1.6.0
angular v5 - ngx-quill > 1.6.0
angular v6 - ngx-quill >= 3.0.0


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionerrorView Question on Stackoverflow
Solution 1 - AngularRoninView Answer on Stackoverflow
Solution 2 - AngularAndrey K.View Answer on Stackoverflow
Solution 3 - AngularvelvalView Answer on Stackoverflow
Solution 4 - AngularAman JainView Answer on Stackoverflow
Solution 5 - AngularFibiView Answer on Stackoverflow