Edit webpage with javascript trick - how to "unedit"?
Emily Wong 
I can use the following scriptlet to make a webpage editable
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0but 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.
3 Answers
You would be able to leave edit mode by changing your command 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 commodo 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>This is editable</div><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>This is editable</div><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
