Material: Angular Material Rich Text Editor

[mohsinmuzawar]

Wanted to ask whether there is going to be a rich text editor which will be added to angular material
Some thing like summernote

[stoperan]

+1

[ThomasBurleson]

A pull request would be welcome. And we will contact the SummerNote author to see if he would be interested in making an Angular Material native version.

@topherfangio - FYI.

[timbrown81]

There are several rich text editors available, all with their own benefits and disadvantages. No single editor will be the best for every problem. I think this is best left to the individual architect to chose the right editor for their situation.

[mbarakaja]

There is an official angular directive for summernote already, maybe is a good option to start.

[ThomasBurleson]

I should also add that an Angular Material-native RichText Editor would be best added to an extension library (eg angular-material.extensions.js) and will not be published as a core component in (angular-material.js).

[kpgarrod]

ngWig would be a good fit for my project because it has no dependency on JQuery or twitter-bootstrap as Summernote does. Unfortunately it has compatibility issues with angular-material. While I agree with @timbrown81 that different editors will suit different projects, it would be good to have a choice of editors that actually work with angular-material. I have been finding that a challenge.

[stevermeister]

@kpgarrod
it's not compatibility issues of ngWig itself, but it looks like it's compatibility issue of angular-material with contenteditable fields on mobile devices.

would like to see answer on this https://github.com/angular/material/issues/8593

[timbrown81]

I have been experimenting with several different rich text editors for my project on Angular Material. In doing so, I've taken made CodePens for 5 different WSYWSG editors. So far I am leaning towards Froala simply because it's native look and feel is implemented with Material Design. Disadvantage is that it requires JQuery. So I am also looking at CKEditor, it will take some skinning to follow MD, but has no dependencies and has a rich ecosystem of plugins.

Let me know if there are any other editors you'd like to have my include.
Angular Material WYSWYG Editors

[stunaz]

What about http://textangular.com?

[kpgarrod]

Certainly ngWig. Once the bug is fixed in a-m I think it will be ideal.

On Tue, 31 May 2016, 19:47 stunaz [email protected] wrote:

What about http://textangular.com?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/material/issues/8487#issuecomment-222765370,
or mute the thread
https://github.com/notifications/unsubscribe/ACDjkY-MABRz7OkeovOb61RJnJJA6maiks5qHHQsgaJpZM4Ig_Gg
.

[stevermeister]

@timbrown81
it would be nice if you could add ngWig (http://ng-wig.js.org/) into your list as well

[timbrown81]

On Tue, 31 May 2016, 19:47 stunaz _@_.*> wrote:
What about http://textangular.com?

@stunaz Here is textAngular: http://codepen.io/timbrown81/pen/JKoGMr

[timbrown81]

@stevermeister @kpgarrod

Here is ngWig: http://codepen.io/timbrown81/pen/QEwQqd

[timbrown81]

And here is Medium using angular-medium-editor http://codepen.io/timbrown81/pen/xObYeB

[stevermeister]

@timbrown81 great thx!
forward my blog audience to your list ;)

[stunaz]

@timbrown81 not sure to understand what your pens do.
Is there any new material component (subject to be in a future angular-material.extensions) ?

Seems to me that you just included external lib, so nothing new.

[kpgarrod]

@timbrown81 Just to be clear, I understand that all of these editors suffer from the same angular-material bug (#5937) on mobile devices. Is that right? I checked medium-editor and confirm that it and ng-wig do.

[ThomasBurleson]

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting @ http://bit.ly/1UhZyWs.

[victordelacruz]

I'm surprised that _Quill_ isn't mentioned here. It looks awesome and more in line with Angular Material philosophy than _summernote_.

Also, it doesn't have any external dependencies on Bootstrap or Jquery: http://quilljs.com/

[jessicamrbr]

I used a combination of TinyMCE (for angular, nom jQuery) and sample editor in docs, it worked very well.

[demiro]

hm... anything for angular and not angularJS?

[henrymana]

I use quilljs (but still with angularjs...) It looks like there is at least one wrapper for angular versions > 2... not sure it if is any good... https://github.com/KillerCodeMonkey/ngx-quill

[chych]

I just discover https://github.com/Sibiraj-S/ngx-editor
works on my project (angular v4)

[stevermeister]

updated ngx-wig that should work for both Angular 4 and Angular 5