使用javascript技巧编辑网页 - 如何“未编辑”？

Question

我可以使用以下scriptlet来编辑网页

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

但在完成我想要做的编辑后（例如，对于手册的屏幕截图），如何将页面状态恢复到正常的不可编辑状态？我曾尝试将true和0分别更改为false和1，但无济于事。

Answer 1

您需要删除contenteditable属性。

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>

或者您可以将该属性设置为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>

Answer 2

您可以通过将命令更改为以下来退出编辑模式

javascript:document.body.contentEditable='false'; document.designMode='off'; void 0

我已经更新了我的答案，包括我的答案的简单工作示例，在chrome，safari和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>