Just came across a rather promosing looking open source rich text editor based on HTML5 technology and the progressive-enhancement approach.
http://github.com/xing/wysihtml5

There are demos of it here:
Vanilla WYSIHTML5:
http://xing.github.com/wysihtml5/

Using Twitter Bootstrap, custom icons, and animations:
http://jhollingworth.github.com/bootstrap-wysihtml5/

Try adding a web url or email address... neat eh?

Would it be easy to get this added to the wysiwyg plugin list?

CommentFileSizeAuthor
#3 wysihtml5-5764506.patch5.22 KBmedden

Comments

twod’s picture

twod
Primary language Swedish
Location Sweden
commented
Title: wysihtml5 plugin for wysiwyg » Add editor: wysihtml5

Maybe, if it meets the requirements on http://drupal.org/node/458450, I would guess it can't be that difficult.
We currently don't have time to add new editor support ourselves, but if you feel up to trying, #900220-1: How to integrate a new editor should get you started.

medden’s picture

medden commented

Thanks for the links. Will take a look into it when I get the chance.

medden’s picture

medden commented
Status: Active » Needs review
StatusFileSize
new wysihtml5-5764506.patch5.22 KB

I have created a patch which adds the WYSIHTML5 editor.

I tried adding buttons, but that was too compicated for me, any help appreciated.

Right now though, it does the following...

Auto linking of urls as-you-type
Generates valid and semantic HTML5 markup (no )
Uses class-names instead of inline styles
Unifies line-break handling across browsers (hitting enter will create
instead of

or

)
Auto-parses content inserted via copy & paste (from Word, Powerpoint, PDF, other web pages, …)
Converts invalid or unknown html tags into valid/similar tags
Uses sandboxed iframes in order to prevent identity theft through XSS

Patch added below for testing.

Anonymous’s picture

Anonymous (not verified) commented

I don't use WYSIWYG enough to really know, but it seems that Aloha is a strong contender in the HTML5 wysiwyg space. There has also already been some work from other Drupalists that use Aloha because it has integration with CreateJS which Crell is so excited about. (Hallo is another editor that CreateJS has integration for)

How does this compare to Aloha?

medden’s picture

medden commented

I have played with Aloha too, and they kind of serve different use cases.

From what I understand, Aloha is what you would call an "in-place" editor. You click on edit node, and rather than be redirected to node/32/edit, you simply edit the text right on the node view page.
Pretty awesome, but when I tried it didn't degrade very nicely, and messes with a lot of Drupal core stuff, like form_api, making compatibility with other module possibly troublesome... 10/10 for awesomeness though.

WYSIHTML5 is a fancy textarea replacement. It uses javascript to do some clever tricks to any text area you specify. Normally that's on a node/body.
You know how drupal turns links into clickable links when you submit? Well WYSIHTML5 does that live in the edit box.
try a demo of it here...
http://tifftiff.de/wysihtml5/examples/advanced.html

Adding it to the WYSIWYG module is a good way to make content editors submit only clean HTML5.

twod’s picture

twod
Primary language Swedish
Location Sweden
commented
Status: Needs review » Needs work

We have #1018352: Add editor: Aloha Editor if you're interested in progress on supporting Aloha Editor.

I don't have time to test the patch right now, but good work so far!
I'll change this to "needs work" though because of the comments in the patch.

RobW’s picture

RobW commented

Yeah, Aloha is a completely different content editing paradigm, no use in grouping the two of these together.

I'm really into a lot of the ideas behind wysihtml5, especially the simple pure html "buttons" and in-page dropdown instead of popup/modal pattern for plugins. Would love to test -- the patch applies cleanly and the library is found, but doesn't look like it's init'ing, and I'm not getting any editors.

charlie-s’s picture

charlie-s commented

Seeing as how WYSIHTML5 embeds so cleanly into the page, it might be cool to actually use it within the context of the current drupal node view. This would likely need a standalone module for WYSHIHTML5.

twod’s picture

twod
Primary language Swedish
Location Sweden
commented

"All" you need is a module which pulls in the edit widget for the body field and displays it. If done correctly, Wysiwyg will detect that there's a format-enabled textarea in there, attach all necessary scripts and initiate the appropriate editor(s). If there's a working implementation layer for WYSIHTML5, that editor would also be available.
Such a module is discussed and prototyped in #1514272: Inline Editing and the WYSIWYG module so let's focus this issue on improving medden's patch in #3.

RobW’s picture

RobW commented

Edited the issue description to include a vanilla example of WYSIHTML5, alongside the version that uses Twitter Bootstrap. Mostly because I love the add link and img fields in the original, and absolutely hate them as modals in the Bootstrap example.

AdrianB’s picture

AdrianB commented

Good, those modals where very annoying.

lightsurge’s picture

lightsurge commented

I don't think this one is going to be easy to add to wysiwyg API.

  1. Wysihtml5 allows for a high degree of complexity in terms of the parser rules, which allow for a highly configurable paste filter, the UI for which could end up looking like that in http://drupal.org/project/wysiwyg_filter if done to the level it justifies.
  2. The toolbar buttons are similar, the UI for configuring them might either take the form of text areas, for advanced users to manipulate a default set in markup, or perhaps have toolbar 'themes'.

Thinking on it I suppose 2 isn't really a problem, it's not that far from fitting into wysiwyg api even if it took the form of some default functionality / styling.

1. is interesting, are there any examples of how a (complex) client side filtering UI has been included in wysiwyg api?

On a side note, if anybody else is trying to get wysihtml5 up and running with wysiwyg api quickly, I found some code from TwoD which I hacked around with to get an (unhealthy) insert method workaround https://github.com/xing/wysihtml5/issues/137
The provided method in wysihtml5 for locating the editor instance didn't seem compatible here, unless I'm missing something, so it was a game of DOM hide and seek.

nikkubhai’s picture

nikkubhai commented

I really want to help with this..... I will do whatever I can...

nikkubhai’s picture

nikkubhai commented

Any updates?

Aurochs’s picture

Aurochs commented

I came to this thread after watching at the wysihtml5 at drupalogy.ru and i liked th editor much there. So would be great to have it in this module.

Aurochs’s picture

Aurochs commented
Issue summary: View changes

Added vanilla example