Java Script to edit page content on the fly

Question

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

Thanks!

Answer 1

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]

Answer 2

document.designMode is supported in IE 4+ (which started it apparently) and FireFox 1.3+. You turn it on and you can edit the content right in the browser, it's pretty trippy. I've never used it before but it sounds like it would be pretty perfect for hand picking printable information.

Edited to say: It also appears to work in Google Chrome. I've only tested it in Chrome and Firefox, as those are the browsers in which I have a javascript console, so I can't guarantee it works in Internet Explorer as I've never personally used it. My understanding is that this was an IE-only property that the other browsers picked up and isn't currently in any standards, so I'd be surprised if Firefox and Chrome support it but IE stopped.