

WYSIHTML5: A better approach to rich text editing - tiff
http://xing.github.com/wysihtml5/
Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.<p>Twitter Bootstrap Plugin: http://jhollingworth.github.com/bootstrap-wysihtml5/
======
junto
I'm using the Twitter Bootstrap styled version of this in a current project.
It looks stunning: <http://jhollingworth.github.com/bootstrap-wysihtml5/>

~~~
sundeep_b
Cool! That's the first thing that hit my mind - how would this look in
bootstrap? Thanks for doing and sharing this!

~~~
junto
Just to be clear. I didn't write this! I just used it.

The credit for writing this goes to James Hollingworth:
<https://github.com/jhollingworth>

~~~
jfhollingworth
Thanks :) Glad you like it!

~~~
therandomguy
Thanks for this. I would most definitely use this on my website. The only
thing missing is the ability to add youtube embed code. Any way to make that
happen?

------
laktek
On a side note, it's worth mentioning W3C has a working group to standardize
in-browser HTML editing (<http://dvcs.w3.org/hg/editing/raw-
file/tip/editing.html>).

The spec is still not settled, but safe to use as a guideline for an
implementation. If libraries align their command API implementations with the
specs, it would be easy for them to port to use native commands as the browser
support gets strong.

------
lunaru
Wouldn't it be more desirable to have these WYSIWYG editors serialize to a
non-HTML markup (like textile or markdown) to reduce the hassle of user-input
sanitization on the back-end? (e.g. stripping script and iframe tags). What's
best-practice these days for storing and displaying rich-edit user input?

~~~
laktek
Depends on the use case. If you are using it in as a website authoring tool,
it makes sense to store the rich-edit user input as HTML itself.

However, in a scenario like commenting or composing a message (where only
limited editing options are available), storing in a format such as Markdown
make sense.

~~~
legutierr
Are you aware of any such editor that does store the data in Markdown or
something similar?

~~~
yesbabyyes
Take a look at bergie's Hallo editor:

<http://bergie.github.com/hallo/markdown.html>

He also has an interesting project called Create:

<http://createjs.org/>

------
zv
Whenever I see "new rich HTML editor", I notice that there is no table
editing. What's the point of editor that is missing the most needed function?
You could argue that it is not needed, however lack of this function leads to
cases of copy-paste from word/excel with bad markup.

~~~
laktek
Aloha handles Tables perfectly (including merge/split of rows & columns, plus
pasting from Microsoft Word).

Check the demo - [http://aloha-
editor.org/builds/development/latest/src/demo/b...](http://aloha-
editor.org/builds/development/latest/src/demo/boilerplate/)

~~~
davidw
Looks nice, but the Aloha licensing basically requires you to buy a license if
you're going to use it commercially, whereas this one uses the very simple and
open MIT license.

~~~
midnightmonster
Furthermore, I've been trying to get them to sell me a commercial license for
months. Someone sometimes emails me back, but they have yet to give me a way
to give them money.

------
slikts
Looking at the examples, I don't understand how this is "a better approach" to
editing, because the HTML it outputs does not follow best practices. The HTML
it outputs should look like a competent human had authored it, but currently
it uses line-break hacks for paragraphs instead of semantic paragraph elements
(two &lt;br> elements aren't really a paragraph, it just looks like it), adds
underline elements with Ctrl+U (these should be reserved for links and defined
in stylesheets anyway) etc.

------
TazeTSchnitzel
Valid HTML5 markup? It's certainly not semantic. <b> should be <strong>, <i>
should be <em>

~~~
decklin
You might want to take a look at this:

[http://www.whatwg.org/specs/web-apps/current-
work/multipage/...](http://www.whatwg.org/specs/web-apps/current-
work/multipage/text-level-semantics.html#the-b-element)

~~~
sandfox
You might want to read this bit from that section: "The b element should be
used as a last resort when no other element is more appropriate. In
particular, headings should use the h1 to h6 elements, stress emphasis should
use the em element, importance should be denoted with the strong element, and
text marked or highlighted should use the mark element."

From the looks of it - while just about legal, it's the worst option going.
<em> etc are far more preferable and 'right'

------
SquareWheel
I like it a lot. It's fast, not bloated, and has a decent feature set. I could
see myself implementing this.

------
bflesch
Very nice. We discussed a lot whether to use the same <iframe> approach on
text editing when working a project of ours called Quabel. In the end, we went
even further with a pure DOM-based editor (via contenteditable) and no hidden
<textarea>. However, we encountered lots of cross-browser issues because of
the differences in contenteditable behavior when using FF / Chrome / Opera and
later dropped contenteditable alltogether. I chuckled when noticing the odd
editor behavior when pressing backspace at the beginning of a list item
because we had exactly the kind of oddities.

------
cmelbye
This is a fantastic rich text editor, easily one of the best I've seen. If I
remember correctly, 37signals uses it in the note writing feature of the new
Basecamp.

~~~
javan
Correct.

------
cickpass_broken
A little related: If anyone is interested I've been working on a WYSI-Markdown
editor.
[http://draftbin.com/c3993540679e0a1af4e5704a208b60ceb46d20dc...](http://draftbin.com/c3993540679e0a1af4e5704a208b60ceb46d20dc/)

Haven't gotten around to a github repo or fixing some pretty annoying bugs.
But, there it is.

------
mgkimsal
Feature request - ability to add 'notes' to a document. I'd imagine these as
toggleable divs that would be able to be inserted anywhere in the doc, then
made visible or not by toggling a class. When 'on' the visible portion would
just be a small box/space/marker that, when clicked, opened up a larger div
with the full note.

I'd tried to do this with the YUI and Dojo editors a couple years ago, but my
JS-fu wasn't good enough. I'm possibly better now, and maybe wil try my hand
at adding that to this editor (which looks nice for a lot of applications) but
someone else with better skills could probably lay the foundation for a
'notes' system much better than me :)

~~~
simonz05
> Feature request - ability to add 'notes' to a document. I'd imagine these as
> toggleable divs that would be able to be inserted anywhere in the doc, then
> made visible or not by toggling a class. When 'on' the visible portion would
> just be a small box/space/marker that, when clicked, opened up a larger div
> with the full note.

I think this suggestion fully qualifies as something they don't want to do,
"[to create] unmaintainable tag soups and inline styles".

~~~
mgkimsal
Who said inline styles? A class and an ID on a span tag inside a larger block
would be all that's required. The clicking stuff would be applied outside of
the document editing area.

This is the sort of reaction that makes me hesitant to even attempt to
fork/patch it, because if this sort of thing wouldn't be accepted back in to
the main trunk, I'm stuck maintaining a separate branch.

------
slikts
Looking at the examples, I don't understand how this is "a better approach" to
editing, because the HTML it outputs does not follow best practices. The HTML
it outputs should look like a competent human had authored it, but currently
it uses line-break hacks for paragraphs instead of semantic paragraph elements
(two &lt;br> elements aren't really a paragraph, it just looks like it), adds
underline elements with Ctrl+U (underlines should be reserved for links and
defined in stylesheets anyway) etc.

~~~
DeepDuh
Want good WYSIWYG html? Try out Apple Pages, export to E-Pub, extract and look
at the xhtml files. After pretty printing it's almost like human authored. It
seems that we still need the Apples and Adobes of this world.

------
jorangreef
How is it doing the speech input for Chrome? Is this an offline API provided
by Chrome or backed by a Google web api?

~~~
Joeri
<http://slides.html5rocks.com/#speech-input>

------
Udo
This is very nice! And it feels very light weight, too. I've been looking for
a saner rich text editor for a while...

------
dmbaggett
We really need to escape the tyranny of the browser "design mode," with all
its quirks. These RTEs are really lipstick on a pig, sadly.

Does anyone know of a JavaScript RTE that does all the text layout and
formatting itself using pure JS?

~~~
evan_
The RTE for Google Docs is written in Javascript, bypassing design mode:

[http://googledocs.blogspot.com/2010/05/whats-different-
about...](http://googledocs.blogspot.com/2010/05/whats-different-about-new-
google-docs.html)

The code isn't officially released anywhere, but someone grabbed the source,
prettied it up, and put it up here: <https://github.com/benjamn/kix-
standalone> Obviously you can't use it for anything without a proper license.

------
snookca
wysihtml5 is a decent editor. It's fairly lightweight in comparison to the
other editors. I feel that its approach to DOM changes makes it easier to
create cross-browser consistency. However, I feel the event system could
really use some work and I find myself working against the editor to add new
features. I would prefer if the framework made it easier to add new features
rather than having to change the core to get the desired result. (and maybe I
just need to spend more time with it.)

Oh, and I should add that the built-in parser isn't very flexible and requires
lengthy configuration.

~~~
WimLeers
Could you go into a little bit more detail on how you think it compares to
other editors?

And more specifically: what are your thoughts on the Aloha editor?

~~~
snookca
The problem I have with most editors is that they try to be like a piece of
desktop software. "Install me and get all of these features including themes
and plugins." That's not what I want. I want an API. I want a consistent
cross-browser approach to wysiwyg html editing that doesn't weigh in at 200+k
minified.

What does Aloha come in at? (Web Inspector is telling me 1.6MB!)

I haven't used Aloha but my impression is that it's trying to be like all the
other editors like TinyMCE or CKEditor.

wysihtml5 is lightweight, which is nice. It provides a command API so that I
can wire up commands to my own toolbar and provides state management. But I
don't like that some built-in commands don't offer up enough externalization,
like autolinking. Or that I can't cancel an event like beforecommand.
beforecommand doesn't even tell me what command is being fired. (or if it
does, I couldn't find out how.)

------
simonz05
Creating a simple editor which works, seems to be quiet hard, judging based on
all the horrible examples we have of existing ones. Hopefully, they'll keep it
clean and don't add many new features.

~~~
alisey
It's hard, especially if you want to support IE8. You need a 100-line function
simply to get cursor position in a cross-browser fashion.

------
cristiantincu
“(…) It uses a sophisticated security concept (…)” —Does anybody know what
does this mean? Does this concept have a name, a description or anything?

~~~
grimboy
As far as I can tell, it's referring to the sandboxed iframe.

------
stef25
The only way to add an image is to enter a URL? An upload feature would be
great, most of my sites / clients require it.

------
eliben
IE in browser support: IE8+

yay ;-)

~~~
lunarscape
Out of curiosity is it working in IE8 for you? Doesn't appear to fully work
for me using IE8 on XP. The editor buttons and most of the page don't appear.

~~~
emp_
The editing does work for me, no buttons show but I am not sure if the demo is
tailored to show that off.

On IE7 nothing really happens.

------
joelrunyon
Any idea if/how this integrates w/ Vanilla Forums?

------
fredley
I desperately want this as a Wordpress plugin.

------
AlexFromBelgium
Now make a WYSILatex editor in html5 :)

