Java Script to edit page content on the fly

Question

I am writing an article about editing pages to select what you really want to print. There are many tools (like "Print what you like"), but I also found this script. Does anyone know about this? I did not find any documentation or links.

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

Thanks!

Answer 1

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

Firefox 2 supports designMode, but this is limited to individual frames, while the contentEditable property applies to individual elements, so you can improve your editable content with your page: D

[Edit (olliej): Remote example, because the contentEditable attribute does not pass SO output filters (despite working in the preview) :(]

[Edit (olliej): I showed a very simple demo to illustrate how he behaves.

[Edit (olliej): So yes, the contentEditable attribute in the associated demo works fine in IE, Firefox, and Safari. Alas, resizing is a css3 function that only webkit supports, and IE does its best to combat almost all 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 directly in the browser, this is rather strange. I have never used it before, but it looks like it would be great for manually selecting print information. A.

Edited: "It also works in Google Chrome. I tested it only in Chrome and Firefox, as these are browsers in which I have a javascript console, so I can not guarantee that it works in Internet Explorer, since I never personally I didn’t use it, I understand that it was an IE-only property that other browsers have chosen and do not currently have any standards, so I would be surprised if Firefox and Chrome support it, but IE stopped.

Answer 3

It allows you to use the built-in browser editing features, if any. As mentioned above, designMode is Gecko, and contentEditable is all the rest (and added in Gecko 1.9). These functions are used as the basis (almost?) Of each WYSIWYG editor created using HTML / Javascript. If you just type / delete, you no longer need the proposed script. (Everything from "void" on is redundant, though.)

For documentation on how these features can be used in an application, the best reference is the Mozilla Midas Specification ( MSDN may also be useful ...).