记录---只需一行代码，任意网页秒变可编辑！
<h1 data-id="heading-0">🧑💻 写在开头</h1><p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<blockquote>
<div>
<p>在我们日常工作中，可能会遇到截图页面的场景，有时页面有些内容不符合要求，我们可能需要进行一些数值或内容的修改。如果你会PS，修改内容难度不高，如果你是前端，打开控制台也能通过修改dom的方式进行简单的文字修改。</p>
<p>今天，我就来分享一个冷门又实用的前端技巧 —— 只需一行 JavaScript 代码，<strong>让任何网页瞬间变成可编辑的！</strong> 先看看效果：</p>
</div>
</blockquote>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202504/2149129-20250416161512184-1929693149.png" alt="" loading="lazy"></p>
<p> </p>
<p> </p>
<p><strong> 甚至，还可以插入图片等媒体内容</strong></p>
<h2 data-id="heading-0">如何实现</h2>
<p>很难想象，这么炫酷的功能，居然只需要在控制台输入一条指令：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:bash;gutter:true;">document.designMode = "on";</pre>
</div>
<p>打开浏览器控制台（F12），复制粘贴这行代码，回车即可。</p>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202504/2149129-20250416161618347-150714821.png" alt="" loading="lazy"></p>
<p> </p>
<div>
<p>如果你想关闭此功能，输入<code>document.designMode = "off"</code>即可。</p>
<h2 data-id="heading-1">Document：designMode 属性</h2>
<p>MDN是这样介绍的：</p>
<p><code>document.designMode</code> 控制整个文档是否可编辑。有效值为 <code>"on"</code> 和 <code>"off"</code>。根据规范，该属性默认为 <code>"off"</code>。Firefox 遵循这一标准。早期版本的 Chrome 和 IE 默认为 <code>"inherit"</code>。从 Chrome 43 开始，默认为 <code>"off"</code> 并不再支持 <code>"inherit"</code>。在 IE6-10 中，该值为大写。</p>
<p>兼容性方面，基本上所有浏览器都是支持的。</p>
<p> </p>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202504/2149129-20250416161633809-1879026907.png" alt="" loading="lazy"></p>
<p> 借助次API，我们也能实现Iframe嵌套页面的编辑：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:bash;gutter:true;">iframeNode.contentDocument.designMode = "on";</pre>
</div>
</div>
<div>
<div>
<h2 data-id="heading-2">关联API</h2>
<p>与designMode关联的API其实还有contentEditable和execCommand（已弃用，但部分浏览器还可以使用）。</p>
<p><code>contentEditable</code>与<code>designMode</code>功能类似，不过<code>contentEditable</code>可以使特定的 DOM 元素变为可编辑，而<code>designMode</code>只能使整个文档可编辑。</p>
</div>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202504/2149129-20250416161703176-634878922.png" alt="" loading="lazy"></p>
<div>
<div><code>document.execCommand()</code> 方法允许我们在网页中对内容进行格式化、编辑或操作。它主要用于操作网页上的可编辑内容（如 <code><textarea></code> 或通过设置 <code>contentEditable</code> 或 <code>designMode</code> 属性为 "true" 的元素），例如加粗文本、插入链接、调整字体样式等。由于它已经被W3C弃用，所以本文也不再介绍了。</div>
<br>
</div>
<div>
<h2>本文转载于：https://juejin.cn/post/7491188995164897320</h2>
</div>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></p>
</div><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/18828937
頁:
[1]