I can use the following scriptlet to make a webpage editable
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
but after doing the edits I want to do (e.g., for a screenshot for a manual), how do I restore the state of the page to its normal uneditable state? I have tried changing true and 0 to false and 1 respectively, to no avail.
I can use the following scriptlet to make a webpage editable
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
but after doing the edits I want to do (e.g., for a screenshot for a manual), how do I restore the state of the page to its normal uneditable state? I have tried changing true and 0 to false and 1 respectively, to no avail.
-
The exact same code but with
trueset tofalseworks for me – Turnip Commented Sep 29, 2015 at 21:41 - @TinyGiant I think this question is not about undoing the edits, but how to leave "edit mode" again. – melpomene Commented Sep 29, 2015 at 21:44
- @melpomene I misunderstood, forgive my ignorance. – user4639281 Commented Sep 29, 2015 at 21:51
3 Answers
Reset to default 1You would be able to leave edit mode by changing your mand to the following
javascript:document.body.contentEditable='false'; document.designMode='off'; void 0
I have updated my answer to include a simple working example of my answer, tested in chrome, safari and firefox.
<input type="button" value="Edit" onclick="javascript:document.body.contentEditable='true'; document.designMode='on'; void 0"> <input type="button" value="Disable Edit" onclick="javascript:document.body.contentEditable='false'; document.designMode='off'; void 0">
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel arcu eget risus iaculis imperdiet vel in leo. Pellentesque modo nibh tellus. Morbi ultricies consectetur fermentum. Aenean eu vehicula libero. Nam pellentesque lobortis dui, ut rutrum neque suscipit at. In tincidunt justo sit amet faucibus bibendum. Sed viverra dignissim nulla, ac lacinia orci bibendum at.</p><p>Mauris enim ex, mattis et augue nec, maximus dignissim leo. Donec maximus interdum blandit. Phasellus porta accumsan est, ac sagittis arcu sollicitudin quis. Donec consequat velit at congue congue. Suspendisse feugiat molestie neque, id condimentum tellus. Vestibulum fringilla libero nec iaculis pellentesque. Cras mollis risus eros, eget mollis augue molestie ac. Nulla tincidunt metus at pulvinar cursus.</p></div>You need to remove the contenteditable attribute.
var demo_editable = document.getElementById('demo-editable');
var demo_button = document.getElementById('demo-button');
demo_editable.setAttribute('contenteditable',true);
demo_button.onclick = function() {
delete demo_editable.removeAttribute('contenteditable');
}<div id="demo-editable">This is editable</div><button id="demo-button">Make not editable</button>Or you can set the attribute to false.
var demo_editable = document.getElementById('demo-editable');
var demo_button = document.getElementById('demo-button');
demo_editable.setAttribute('contenteditable',true);
demo_button.onclick = function() {
delete demo_editable.setAttribute('contenteditable',false);
}<div id="demo-editable">This is editable</div><button id="demo-button">Make not editable</button>Try this:
- Hit F12 to inspect the page
- Right-click on the top-most element the
<html>tag - From the resulting contextmenu, select "Edit as HTML"
- Focus the editable HTML and hit Ctrl+A to select all
- Hit Ctrl+C to copy the page's HTML to your clipboard
- Make the edits to the contenteditable section
- Repeat steps 1 through 4
- Ctrl+V to paste over the edited HTML with the page's original HTML