编辑网页与javascript技巧-如何“取消编辑”

Edit webpage with javascript trick - how to "unedit"?

本文关键字：编辑 取消 取消编辑 如何 网页 javascript 技巧      更新时间：2023-09-26

我可以使用下面的脚本来创建一个可编辑的网页

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

但是在做了我想做的编辑之后(例如，对于手册的截图)，我如何将页面的状态恢复到正常的不可编辑状态?我已经尝试将true和0分别更改为false和1，但无济于事。

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

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>

您需要删除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>

试试这个:

  1. 按F12查看
    2. 右键单击最上面的元素<html>标签在生成的上下文菜单中，选择"编辑为HTML"
  2. 聚焦可编辑的HTML并按Ctrl+A选择所有
  3. 按Ctrl+C复制页面的HTML到剪贴板
  4. 对可内容部分进行编辑
  5. 重复步骤1到4
  6. Ctrl+V将编辑后的HTML粘贴到页面的原始HTML
相关文章：