Wysiwyg editor for angular4

Question

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

[wysihtml](https://github.com/Voog/wysihtml) is a good option with no dependency on JQuery and an MIT license. — JayChase, Sep 12 '17 at 12:52
The quality of all the answer is very good and they're very helpful. A pity the question has been closed, It's a case where a strict application of the rule made the StackOverflow less valuable... — Gab, Jul 20 '18 at 09:44
CKEditor 5 has an official integration with Angular 2+. For an installation instruction check https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html The editor is Open Source, commercial license with support is available too. — Wiktor Walc, Nov 16 '18 at 16:04
best editor https://blog.almightytricks.com/2020/10/19/ngx-quill-free-wysiwyg-editor/ — Sangram Badi, Oct 20 '20 at 11:59

score 63 · Accepted Answer · edited Jan 21 '21 at 01:28

63

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

ng2-ckeditor

demo here

ngx-editor

demo here

quill.js for angular

demo here

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

PRIME NG

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

ngx-md

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

Edit

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

edited Jan 21 '21 at 01:28

Sibiraj

4,486
7
33
57

answered Mar 07 '18 at 10:00

Ronin

7,322
6
36
54

this answer may be useful to one, but can you suggest how to provide code editor itself? I mean i want a editor where i can write code and also side by side i can see code snippet in
```
 tag.
```
– Prasanna Apr 19 '18 at 11:16
3

ngx-editor is not actively maintained – Anil Vangari Feb 11 '19 at 21:51
@AnilVangari thx I'll update it – Ronin Feb 12 '19 at 10:11
To save somebody some time, quill does not currently work with Angular Universal, although it is my favorite in the bunch... – Jonathan Apr 21 '20 at 04:09
Is there any way to browse image in the `ng2-ckeditor`? – Nehal Jaisalmeria Sep 09 '20 at 17:38
I also agree with quill.js solution. There is a very useful video tutorial on this: https://youtu.be/mav4qhcaPqo – user2899728 May 31 '21 at 17:25

score 36 · Answer 2 · edited Aug 26 '22 at 10:58

36

Try this simple but powerful WYSIWYG editor for Angular 6-13 (native)

AngularEditor

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

Demo is here

PR or new features request are welcome.

This editor was 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.

edited Aug 26 '22 at 10:58

Vidya Sagar

1,699
3
17
28

answered Jun 02 '18 at 10:38

Andrey K.

655
1
8
16

For some reason, the alignment of the controls is broken on a fresh implementation. I thought it was because of the base rem size of my document, but that was not the case. Any ideas? – Tanasos Jun 07 '18 at 10:26
@snkv Perhaps the base font is different, you need to understand ... the page with a working example. [link](https://angular-editor-wysiwyg.stackblitz.io/). In general, of course the styles and markings I still need to edit. – Andrey K. Jun 10 '18 at 18:21
I made some custom adjustments, it seems to be working fine by now. I will re-check this thread if I stumble on a roadblock. Thanks again! – Tanasos Jun 12 '18 at 05:14
Uploading an image doesn't seem to be working? – CountZero Nov 20 '18 at 14:08
awesome lib thank you. i have a small issue, the final editor value i get doesn't have the css (for example no text-align: center even though user clicked on align-center) – omer Jul 28 '19 at 13:02
@omer https://angular-editor.kolkov.ru/ Is there a problem with this example? – Andrey K. Jul 29 '19 at 14:08
No image image resizing... – Jonathan Apr 21 '20 at 04:33

score 8 · Answer 3 · answered May 18 '18 at 04:53

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

NGX-EDITOR

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.

NGX-QUILL

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'

@NgModule({
  imports: [
    ...,

    QuillModule
  ],
  ...
})
class YourModule { ... }

Current version of ngx-quill does not support parsing HTML element. It is though under development. So far it works fine in All Browsers including IE11. — Aamer Shahzad, Feb 21 '20 at 10:23

score 4 · Answer 4 · answered Sep 12 '17 at 12:43

4

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

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

answered Sep 12 '17 at 12:43

Aman Jain

2,294
1
16
22

score 2 · Answer 5 · answered May 10 '18 at 06:29

2

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

demo-page
tool bar image

answered May 10 '18 at 06:29

Fibi

51
6

Wysiwyg editor for angular4

5 Answers5

ng2-ckeditor

ngx-editor

quill.js for angular

PRIME NG

ngx-md

AngularEditor

Linked