Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Aloha Editor - HTML5 WYSIWYG Editor

aloha-editor.org

Post reply on HN
Print view View original

11–20 of 40 posts

Re: Aloha Editor - HTML5 WYSIWYG Editor

#11

Post by rkwz »

mixonic wrote: post #4

Having written an editor on contentEditable before, I think the biggest challenge is paste events. http://stackoverflow.com/questions/3553041/how-can-you-catch... The onpaste event isn't supported across the board, and doesn't let you access the paste content in any way. Just try copying a webpage and posting it into the Aloha Editor area- it will paste the entire dom. Blech. contentEditable should be a boon for web…

This can be solved to an extent by the "invisible text area"[1] trick. Here, whatever text is inputted or pasted goes directly to an invisible text area. And from that it is appended to the CE div/iframe that's is shown to the user. I think Cloud9IDE[2] uses this technique.

That and the way every browser reacts to the enter key press. Firefox appends
, Chrome appends and IE[3] appends

.

[1] I don't know where I read about this. Sorry.

[2] http://cloud9ide.com/

[3] The IE behavior is similar to MS Word.

Re: Aloha Editor - HTML5 WYSIWYG Editor

#12

Post by thousande »

wladimir wrote: post #2

Looks very promising. One thing I wonder, though, is why WYSIWYG editors still use explicit markup (bold, italic, font size) instead of allowing the definition of styles. This is a hassle if you want to write consistent documents. Even Google Documents does this; it does not have custom named styles like Word. It only has named styles for header 1..6, but usually that's not enough.

TinyMCE has had this ability since 3.3

http://tinymce.moxiecode.com/wiki.php/Configuration:formats

Re: Aloha Editor - HTML5 WYSIWYG Editor

#13

Post by ZoFreX »

wladimir wrote: post #2

Looks very promising. One thing I wonder, though, is why WYSIWYG editors still use explicit markup (bold, italic, font size) instead of allowing the definition of styles. This is a hassle if you want to write consistent documents. Even Google Documents does this; it does not have custom named styles like Word. It only has named styles for header 1..6, but usually that's not enough.

This is great input, the named styles are my absolute favourite thing about Word. One of my other peeves with almost all WYSIWYG editors is that they default to line-by-line editing, and generally avoid exposing paragraphs as a first-class construct. In both Word and HTML, treating content as paragraphs makes things more predictable, stable (in terms of layout), and easier to understand IMO.

Re: Aloha Editor - HTML5 WYSIWYG Editor

#14

Post by bobfunk »

mixonic wrote: post #4

Having written an editor on contentEditable before, I think the biggest challenge is paste events. http://stackoverflow.com/questions/3553041/how-can-you-catch... The onpaste event isn't supported across the board, and doesn't let you access the paste content in any way. Just try copying a webpage and posting it into the Aloha Editor area- it will paste the entire dom. Blech. contentEditable should be a boon for web…

For Webpop (http://www.webpop.com) we ended up going with TinyMCE as our rich text editor after trying both CKEditor and WymEditor because Tiny was the only one that handled pasting into the edit area fairly well.

It's really tricky to handle right, and the Paste plugin for Tiny has to use a lot of tricks to do it properly. The onpaste event doesn't really work for this, because even in browsers that supports it, it just gives you plain text with no formatting. Same with a hidden textarea.

It's ok if you want to strip all styles, and then let your user go though and apply all the same styles from his Word document manually once again (frustrating!), but otherwise it wont cut it.

The paste plugin does a lot of browser specific stuff, but basically handles it by creating a contenteditable div and redirecting the paste event into that, then grabbing the horribly broken HTML browsers produce when pasting from anything and cleaning it off before moving it back to the place the user pasted too...

Re: Aloha Editor - HTML5 WYSIWYG Editor

#16

Post by rsoto »

mweibel wrote: post #6
foxylad wrote: post #3

I can't work out how to insert images. And although it implies it works with all browsers, it would be good to know which versions.

Just drag'n'drop an image from your desktop into the page. At least it worked for me ;)

Well, yes, it works, but there isn't an upload process, so I thought the image is linked to your local drive-- which is useless.

In closer inspection, the image gets transformed to a base64 encoding (data:image/gif;base64,[...]) which is useless in this context.

Re: Aloha Editor - HTML5 WYSIWYG Editor

#20

Post by pak »

Pretty slick--have to say I enjoyed the big mouse cursor coming up and editing the top paragraph, that was rather clever.

In trying the demos, it behaved rather unobtrusively and flexibly, and despite looking a little like Word's contextual ribbon it didn't make me want to set anything on fire after a few minutes. That's a first for an in-browser rich text editor.

I think it's interesting that "old" rich text editors like TinyMCE/FCKEditor tried to copy Word 2003 right down to the massive toolbars, and then barely anybody needed all that crud so it fell out of fashion in newer, slim designs (e.g., StackOverflow, Quora). Nowadays, it appears that Word 2007/2010 has finally gotten enough mindshare for the ribbon/contextual palette model that it's finally being comfortably re-implemented as a web UI widget.

Post reply on HN