Javascript – Java Script to edit page content on the fly


I'm writing an article about editing pages in order to hand pick what you really want to print. There are many tools (like "Print What you like") but I also found this script. Anyone knows anything about it? I haven't found any kind of documentation or references.

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


Best Solution

The contentEditable property is what you want -- It's supported by IE, Safari (and by chrome as a byproduct), and I think firefox 3 (alas not FFX2). And hey, it's also part of HTML5 :D

Firefox 2 supports designMode, but that is restricted to individual frames, whereas the contentEditable property applies applies to individual elements, so you can have your editable content play more nicely with your page :D

[Edit (olliej): Removed example as contentEditable attribute doesn't get past SO's output filters (despite working in the preview) :( ]

[Edit (olliej): I've banged up a very simple demo to illustrate how it behaves]

[Edit (olliej): So yes, the contentEditable attribute in the linked demo works fine in IE, Firefox, and Safari. Alas resizing is a css3 feature only webkit seems to support, and IE is doing its best to fight almost all of the CSS. sigh]