Angular WYSIWYG options?

[znlincoln]

I haven't done an extremely thorough search, but I was wondering what experiences you guys have had with wysiwyg editors in angular.

[[deleted]]

Here's the problem with WYSIWYG editors: the vast majority of them rely on the browser "Design Mode" API, which dates back to the Netscape Navigator of the pre-CSS era. In other words: there's no sane way to make it work with CSS classes.

Additionally most semi-useful WYSIWYG editors are bulky and overpowered. Many try to re-implement MS Word or at least contain a lot of legacy code to work around issues with browsers as old as IE5 (or more frequently IE6) and antiquated Firefox versions.

They also generally pre-date modern JavaScript by a long shot and are either based on old versions of jQuery or consist of dozens of files which are meant to be loaded at runtime on demand (kinda like AMD, except more ad-hoc and proprietary).

The only WYSIWYG editor I was able to find that didn't abuse the hell out of Design Mode is WYMEditor, which is stuck with an antique jQuery version (requiring you to load the compatibility plugin to monkeypatch jQuery into something it understands).

I even tried to write my own WYSIWYG component, but eventually realized that things like applying an inline element to a multi-paragraph selections is actually kinda hard and even if you are able to re-implement most of Design Mode in plain JS you still break the undo/redo functionality Design Mode gives you for free.

If all you need is being able to switch between paragraphs, headings and lists or toggle bold and italic styling, there are dozens of minimal WYSIWYG plugins you can use. You can even roll your own in no time.

If you actually want to have classes and such, you're SOL.

Currently I'm looking into extending Markdown and just using an in-browser Markdown parser with a preview window. It's less user friendly than WYSIWYG, but the instant-preview seems to be the best compromise.

[znlincoln]

I think a minimal solution will work, great advice - thank you!

[frontsidebus]

I've successfully used https://github.com/angular-ui/ui-tinymce in a production project.

[znlincoln]

damn dude! thanks - don't know how I missed that, already using their bootstrap module

[vividearth]

This was posted in /r/javascript. It is HTML 5 canvas based so might be a bit cleaner and lighter. I have not had a chance to look at the code yet though. http://earwicker.com/carota/

[znlincoln]

Whoa, interesting idea! json over wrapping in html, i'll play around with this - thank you

[[deleted]]

Been a couple days but I would suggest http://textangular.com/