实现编辑网页document.body.contentEditable

最新推荐文章于 2025-04-15 09:27:31 发布
最新推荐文章于 2025-04-15 09:27:31 发布
阅读量8.2k 收藏 5
点赞数 4
分类专栏： JavaScript 文章标签： 编辑网页 contentEditable javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JackieDYH/article/details/105776898
版权

发现一个好玩的，可以用来编辑网页

打开console输入，即可。

document.body.contentEditable='true';

 

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

用鼠标点击网源站的内容，看！ 可以任意修改网页百的内容了
现在你会发现他的页面竟然可以任由你自由修改了！！
javascript:document.body.contentEditable='false'; void 0 

按照你自己的意图修改好后，在地址栏中输入：

 

Document.execCommand指令使选中的字体变粗
胡世林的博客
03-02 585
三月份了，广州的春天也到了，白昼也正在努力向着夜晚扩张，夜晚六点多也可以看到鱼肚白了 常用的富文本中，常常可以看到斜体/粗体的切换。比如下方 这是一个在富文本编译器中很常见的功能，即使此时的我，用着csdn的时候，也可以看到这个功能 需要解析这个功能，需要使用到一个api。 documnet.execommand 接下来是使用它作为一个简单的例子。比如 <!DOCTYPE html> <html lang="en"> <head> <meta char
修改页面快捷命令document.body.contentEditable=‘true‘；
热门推荐
小清华的小哥哥
08-28 2万+
众所周知 F12可以临时修改网页，达到‘伪造’的目的，但每次都需要找到修改元素的位置才行，不是很方便。 下面有两个快捷命令： 1、进入开发者模式（F12或鼠标右击后选择检查），在开发者模式中进入控制台（ctrl+shift+k或鼠标左击‘控制台’），然后在控制台下方的命令窗口内输入命令document.body.contentEditable='true'; 然后回车，就可以像编辑word文档一样随意编辑原始页面了（ps：此时退出开发者模式也可以继续编辑，只要不刷新页面就行）。 2、同上，进入控制台后，输
document.body.contentEditable='true'
qinglangee的专栏
02-21 4960
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
前端整活神器！只需一行代码，瞬间编辑任意网页，想改哪里改哪里
最新发布
weixin_42925303的博客
04-15 379
页面一键编辑
document.body.contentEditable=‘true‘；
wafer_biscuit的博客
07-18 1186
document.body.contentEditable=‘true’;
编辑网页document.body.contentEditable='true';
scbl2017的博客
04-21 1万+
发现一个好玩的，可以用来编辑网页 打开console输入，即可。 document.body.contentEditable='true';
document.body.contentEditable让开发者在网页中轻松实现可编辑
码海扬帆：前端探索之旅的博客
05-13 1307
document.body.contentEditable是一个属性，用于控制网页中元素的可编辑性。当你将这个属性设置为"true"时，你就可以在网页上编辑文本内容，包括输入、删除、拖拽等操作，就像在一个富文本编辑器中一样。这个属性常常被用来创建可编辑的网页内容，比如在线文档编辑器、博客编辑界面等。
由document.body和document.documentElement想到的
01-19
对于document.compatMode，很多朋友可能都根我一样很少接触，知道他的存在却不清楚他的用途。其实这个对于我们开发兼容性的web页面还是很有帮助，我们都知道，盒模型的渲染在 Standards Mode和Quirks Mode是有很大...
让你的网站可编辑的实现js代码
01-21
非常的简单 一、打开你要黑的网站， 二、在浏览器的地址栏里输入： 代码如下: [removed]document.body.contentEditable=’true’; document.designMode=’on’; void 0 三、现在你会发现他的页面竟然可以任由你自由...
编辑器中designMode和contentEditable的属性的介绍
10-30
在线编辑器是网页开发中常用的一种工具，它允许用户直接在网页上进行文本编辑和格式化，常用于博客、论坛、CMS系统等。在实现在线编辑器的过程中，有两个关键的属性至关重要，即`designMode`和`contentEditable`。...
document.execCommand()解析
03-15
例如，Markdown编辑器常常利用这个API实现用户友好的编辑体验，让用户可以直接在网页上进行格式化操作。 总结，`document.execCommand()`是前端开发中处理文本编辑的重要工具，它允许我们模拟用户的文本操作，但...
编辑网页document.body.contentEditable=‘true‘；
小屁孩大帅-保密的博客
07-31 1万+
发现一个好玩的，可以用来编辑网页 打开console输入，即可。 document.body.contentEditable='true';
使网页内容可编辑的属性contentEditable与(iframe).document.designMode!!
weixin_34074740的博客
02-24 297
<p contentEditable="true">可编辑的字</p>,则效果：我可编辑而对<iframe id="editor"></iframe>可以通过JS程序editor.document.designMode="on"使iframe内容可编辑！ 转载于:https://www.cnblogs.com/phqde/archive/2005/0...
js中document.documentElement 和document.body 以及其属性
Optimal New
05-02 833
（原来HTML里是document.body  --XHTML里是document.documentElement ,都指的是节点(OR元素) ）   在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document .body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带标签的页
contentEditable和document.designMode的区别
wyd018fw
01-17 837
contentEditable和document.designMode的区别 2011年08月24日 　　contentEditable和document.designMode的区别http://www.xiahaixia.com/2011/03/15/contenteditable%E5%92%8Cdocument-designmode%E7%9A%84%E5%8C%BA%E5%88%...
前端冷知识
linda_417的博客
08-09 579
HTML篇 浏览器地址栏运行JavaScript代码 在浏览器地址栏可以直接运行JavaScript代码，做法是以javascript:开头后跟要执行的语句。比如： javascript:alert('hello from address bar :)'); 将以上代码贴到浏览器地址栏回车后alert正常执行，一个弹窗神现。 需要注意的是如果是通过copy paste代码到浏览器地址
神奇的代码——可随意修改复制页面内容
ZShiJ的博客
12-20 6039
需要注意的是，这段代码只能在支持JavaScript的浏览器中运行，并且需要具有足够的权限才能修改网页内容。进入开发者模式：在大多数浏览器中，你可以通过按下F12键或右键单击页面并选择"检查"来进入开发者模式。是一个JavaScript代码，用于将文档的模式设置为可编辑模式。这段代码是用于在网页中以可编辑模式打开原始页面的JavaScript代码。输入命令：在控制台中，你可以输入任何有效的JavaScript代码。这意味着你可以在控制台中直接编辑网页的内容，就像在Word文档中一样。
内容可编辑contenteditable
xxxxxMiss的博客
04-06 1万+
前言最近遇到一个问题：文本域的高度随输入内容的多少自适应，就像是这样的： 刚刚拿到这个问题，就想到用textarea来搞定，尝试了一下，虽然也搞定了，但总感觉有点麻烦。仔细思考一番，想到貌似h5有个contenteditable全局属性也可以实现文本编辑，遂尝试搞起。contenteditable是什么？MDN上是这样描述的： The contenteditable global attr
document.designMode = "on"
04-08
上述代码片段展示了如何利用 `contenteditable` 实现单个节点内的文字编辑功能而不影响其余不可变的部分。 #### 插入新节点实例 如果需要动态添加新的可编辑区块，则可以结合前面提到过的 `insertNode()` 函数完成...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JackieDYH

谢谢您嘞！我会继续加油地

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值