文章/答案/技术大牛

发布

社区首页 >问答首页 >用javascript技巧编辑网页-如何“取消编辑”？

问用javascript技巧编辑网页-如何“取消编辑”？
EN

Stack Overflow用户

提问于 2015-09-30 05:35:10

回答 3查看 11.8K关注 0票数 1

我可以使用下面的scriptlet使网页成为可编辑的

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

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

javascript

html

回答 3

Stack Overflow用户

发布于 2015-09-30 05:47:10

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

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>

票数 1

Stack Overflow用户

发布于 2015-09-30 05:51:08

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

票数 0

Stack Overflow用户

发布于 2019-12-19 10:18:12

试试这个：

Ctrl on >

单击F12从弹出的上下文菜单中查看最顶层元素<html> tag
，选择"Edit as HTML“
聚焦可编辑的HTML并单击Ctrl+A以选择all
Hit Ctrl+C以将页面的HTML复制到您的clipboard
Make对可内容编辑的HTML所做的编辑步骤1至4 H116Ctrl+V以使用页面的原始HTML粘贴到编辑后的HTML上

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32854161

复制

相似问题

问用javascript技巧编辑网页-如何“取消编辑”？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用javascript技巧编辑网页-如何“取消编辑”？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用javascript技巧编辑网页-如何“取消编辑”？
EN