Help me reverse-engineer Google Wave
October 29, 2009 7:13 AM Subscribe
Google Wave question: does anyone know the technical details of how blip editing works?
It's not a textarea, obviously; if you watch in firebug while editing a blip it just looks like they're building up div and p tags on the fly. Plus, you know, there's all that non-text stuff.
So have they reinvented all the functionality of browser text input by individually capturing all the key and mouse events, or what?
(I ask because I have a project going where some of this functionality would be extremely useful -- I'm wondering if this is a well-known technique that somehow passed me by, or if it's black magic that I haven't a hope of reproducing.)
It's not a textarea, obviously; if you watch in firebug while editing a blip it just looks like they're building up div and p tags on the fly. Plus, you know, there's all that non-text stuff.
So have they reinvented all the functionality of browser text input by individually capturing all the key and mouse events, or what?
(I ask because I have a project going where some of this functionality would be extremely useful -- I'm wondering if this is a well-known technique that somehow passed me by, or if it's black magic that I haven't a hope of reproducing.)
Best answer: I believe most WYSIWYG editors use a built-in browser feature for rich-text editing, which is turned on using the attributes 'contentEditable' for a single element, or 'designMode' for an entire document (which for instance could be an iframe inside your actual page).
The WHATWG Blog has a good post, 'The Road to HTML 5: contentEditable' which is a good starting point. Also, if you're familiar with the Prototype library, 37signals' 'wysihat' is a small lightweight WYSIWYG editor core that could be good to build on or at least learn from (since the source code is pretty minimal and decently organised).
posted by chrismear at 7:55 AM on October 29, 2009
The WHATWG Blog has a good post, 'The Road to HTML 5: contentEditable' which is a good starting point. Also, if you're familiar with the Prototype library, 37signals' 'wysihat' is a small lightweight WYSIWYG editor core that could be good to build on or at least learn from (since the source code is pretty minimal and decently organised).
posted by chrismear at 7:55 AM on October 29, 2009
Best answer: Mozilla Dev Center has an article documenting contentEditable and friends. See also mfinkle's post on the Midas rich text editor and another on contentEditable in particular.
posted by zachlipton at 8:18 AM on October 29, 2009
posted by zachlipton at 8:18 AM on October 29, 2009
Response by poster: That is wonderful, thanks guys -- I don't know how I managed to have never heard of contentEditable before today, but it's exactly what I'm looking for.
posted by ook at 8:40 AM on October 29, 2009
posted by ook at 8:40 AM on October 29, 2009
This thread is closed to new comments.
posted by ook at 7:22 AM on October 29, 2009