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!
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!
Share Improve this question edited Mar 20, 2012 at 19:41 om-nom-nom 62.8k13 gold badges185 silver badges230 bronze badges asked Oct 6, 2008 at 23:19 ebarreraebarrera 2252 gold badges4 silver badges10 bronze badges 1- I'm curious why this is tagged "dcom", and now that I'm noticing that I'm wondering if I have misread the question somehow? – Grank Commented Oct 6, 2008 at 23:29
3 Answers
Reset to default 9The 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]
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.
It enables the browser's in-built editing functionality where available. As is mentioned above, designMode is Gecko and contentEditable is everyone else (and added to Gecko 1.9). These features are used as the basis of (nearly?) every WYSIWYG editor built with HTML/Javascript. If you're simply typing/deleting, nothing more should be necessary than the script you provided. (Everything from 'void' on is superfluous though.)
For documentation on how these features can be used in an application, the best reference is Mozilla's Midas specification (MSDN may be of some use as well...).