File Under: Programming

Make Any Content Editable With JavaScript

Webmonkey faked onto the Google homepage

There’s a little trick going around that lets you edit any content by implementing a single line of JavaScript. It utilizes an HTML5 document property that is not well known, but is well supported in recent browser versions: contentEditable. The image included here is a screen capture of Google’s homepage, with a slight edit: the upper left says Webmonkey instead of Web.

To try it out for yourself, just enter this text into your location bar and hit enter:

javascript:document.body.contentEditable=’true’; document.designMode=’on’; void 0

You’ll remain on the same page, but you will be able to delete or alter any of the text. Of course, the catch is that only you can see your edits and only until you reload. What use is it, other than creating fake screenshots, as BlogStorm suggests?

The contentEditable property (and the similar document.designMode) are meant to enable WYSIWYG editing. There was a lengthy discussion on the WHATWG mailing list in 2005 that discussed problems with the property, questioning its necessity.

One of the cool parts about contentEditable is that it can apply to specific elements. The code above makes the entire body of the page editable. But imagine you wanted to have only some pieces of a page edit-in-place. It’s possible to set them to contentEditable=true to emulate some snazzy desktop-like features. Ajax could be used to save the content.

A little research shows few sites are utilizing this method now. That may have more to do with past browser support than anything else. We’ll have to see, but contentEditable may be a promising way to open up elements of the page to editing–and saving.

See also: