给html标签添加 contenteditable 属性，可实现页面可编辑的效果

最新推荐文章于 2024-05-13 15:16:14 发布
最新推荐文章于 2024-05-13 15:16:14 发布
阅读量3.8k 收藏 1
点赞数 3
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luzhaopan/article/details/98444605
版权 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>contenteditable</title>
</head>
<body>
<div contenteditable style="border:1px solid; width:600px; min-height: 300px">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564893892182&di=a13fd00a7e9b6a419bc5eaeed36c93c1&imgtype=0&src=http%3A%2F%2F06.imgmini.eastday.com%2Fmobile%2F20171130%2F20171130032840_40b6bd9db5b3e14d0eb89d42235f1df3_4.jpeg" />

</div>
</body>
</html>

 

可以打开任意一个网站，在其body标签上加上contenteditable属性，即可对该页面的内容进行编辑，如下图 

 

奋斗的吧小菜鸟
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML文本编辑标签
qq_59933216的博客
12-31 808
HTML基础——文本编辑标签：HTML标题、HTML段落、HTML换行、 HTML缩小文字、HTML保留文本格式、HTML注释（注音等）、HTML下标、HTML上标、HTML粗体、HTML斜体、HTML高亮、HTML分割线、HTML删除线、HTML下划线、HTML缩写、 HTML文本显示方向、HTML插入图片、HTML超链接。下一期我将出一个网页新闻的小案例巩固今天所学的内容！
在html中实现word中打批注的功能
biraotian的博客
08-15 2176
随着企业数字化的发展，各行各业都需要不断积攒行业数据，数据的来源有很多，但是一般这些数据都需要通过人机耦合的方式进行数据准确性的确认。为了实现模型跑出来的结果可以准确的显示在页面中，正确的结果又可以反哺给模型，所以在前端做了很多尝试。我们实现的有3种:1是把内容转成图片，利用ocr识别，前端svg绘制坐标。2通过把图片/文本加上编号，缺陷是结构要足够简单，复杂排版不满足。3是把文档解析成html，对html进行打标签。这里只讲第三种，也的最近刚写的demo，有兴趣的可以拷贝到自己的项目中试试运行环境： no
设置contenteditable属性可编辑HTML标签的内容(可代替textarea)
12-13
复制代码代码如下:<div contenteditable=”true”>可以编辑里面的内容</div> 如果你在BODY里面加上contenteditable="true"，可以发现该属性是多么的神奇。因此我们可以给HTML标签设置contenteditable="true"属性则可以对该标签进行编辑。 contenteditable属性兼容所有浏览器（IE6之前的版本是否兼容未测试） 在有些时候我们完全可以用DIV去替代input或者textarea来达到同样的效果，例如，在使用ajax的时候，在提交表单时我们可以获取DIV的内容。 细心的人会发现，QQ空间中的发表说说的文本框其实就是一
html设置可编辑状态,HTML5 - 使某个页面元素或整个页面可编辑
weixin_33992214的博客
05-30 3945
1，把任何元素的contenteditable属性设置成true，点击即可以编辑该元素的内容contenteditable="true">你可以编辑这段文本2，也可以使用js来动态的开启和关闭编辑功能//让元素可以编辑function startEdit(){var element = document.getElementById("editableDiv");element.conten...
document.body.contentEditable让开发者在网页中轻松实现可编辑
最新发布
码海扬帆：前端探索之旅的博客
05-13 269
document.body.contentEditable是一个属性，用于控制网页中元素的可编辑性。当你将这个属性设置为"true"时，你就可以在网页上编辑文本内容，包括输入、删除、拖拽等操作，就像在一个富文本编辑器中一样。这个属性常常被用来创建可编辑的网页内容，比如在线文档编辑器、博客编辑界面等。
探索 X-Editable：在网页上实现动态编辑的利器
gitblog_00095的博客
03-20 369
探索 X-Editable：在网页上实现动态编辑的利器 项目地址:https://gitcode.com/vitalets/x-editable 项目简介 X-Editable 是一个轻量级且功能强大的JavaScript库，它允许你在网页上将静态内容转变为可编辑模式，无需跳转到新的页面或打开弹窗进行修改。该项目由Vitaliy Sitnikov（vitalets）开发，旨在提升用户体验，让用户可...
html5中的属性用法,HTML5中ContentEditable属性的使用方法
weixin_42525211的博客
06-10 898
HTML5中ContentEditable属性的使用方法发布时间：2020-05-22 15:52:32来源：亿速云阅读：226作者：鸽子HTML中的contentEditable的属性可以打开某些元素的可编辑状态，也许你没用过contentEditable属性，甚至从未听说过，contentEditable的作用相当神奇，可以让div或整个网页，以及span等等元素设置为可写。我们最常用的输入文...
修改或复制网页内容
weixin_54475237的博客
09-13 1033
ctrl+p是打印的快捷键，一般的限制都可以通过这个方式来复制。
重新认识HTML系列004——全局属性contenteditable
林中路
06-16 1169
html全局属性讲解之——contenteditabel 查看文档 属性说明从文档中，我们可以提取到以下关键信息： 它表示该element是否可以被编辑 默认值会继承父元素的 它有两个值：true表示该元素可编辑 false表示该元素不可编辑 这是一个可枚举属性 它不是一个布尔属性 接下来我们做个实验实验一：html-contenteditable.html <!DOCTYPE html><ht
HTML标签代码分享：contenteditable篇
yunduanaoligei的博客
02-10 663
今天分享下”HTML标签代码分享：contenteditable篇“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 代码如下: <div contenteditable=“true”>可以编辑里面的内容</div>，你可以发现这个属性有多神奇。所以我们可以给HTML标签设置contenteditable="true"属性可以编辑标签。 contenteditable所有浏览器都兼容属性（IE6
使用HTML5中的contentEditable来将多行文本自动增高
09-28
同时，如果父元素是可编辑的，而子元素没有明确设置`contentEditable`属性，那么子元素将默认继承父元素的编辑状态。 3. **默认继承**：如果未显式设置`contentEditable`属性，那么元素的编辑状态将取决于其父元素...
html5新增标签和属性
01-24
这些新增的标签和属性可以帮助开发者快速实现页面布局，提高浏览器的解析速度，并且提供了更多的选择和控制选项。 结构标签 HTML5 中新增了许多结构标签，包括： * header：头部标签，用于定义页面的头部区域 * ...
利用CSS实现禁止双击选择页面内容的实例展示
09-25
4. `auto`：这是默认值，如果元素包含可编辑的文本，如`<input>`元素或contenteditable属性为"true"的元素，那么文本是可以选择的，否则选择取决于父元素的`-ms-user-select`设置。 通过控制`-ms-user-select`属性...
利用FCKeditor在JSP_JavaEE中实现在线编辑.pdf
01-02
实现编辑区域可以使用两种方法：一是设置 DIV 或 TABLE 的 contentEditable 属性为 True， 让一个区域可编辑；二是设置 iframe 或 frame 中的 document 属性 designMode 为 ON，以实现可编辑。让编辑区域自动产生 ...
关于HTML5你必须知道的28个新特性,新技巧以及新技术
09-28
6. **contenteditable属性**：通过添加`contenteditable`属性，可以轻松使任何元素变为可编辑，方便用户直接在网页上编辑内容。 7. **Email Inputs**：`<input type="email">`允许浏览器进行电子邮件格式的前端验证...
html5实现对试题图片批改效果，类似盖章效果
smile的专栏
09-03 8611
因项目功能需要，最近几天开始研究html5，实现对上传的试题图片进行批改对错，批改完保存批改后的图片功能。主要涉及到html5 canvas画布和js的相关知识点。 参考：http://www.xwcms.net/js/qttx/26316.html 作者写的功能，修改后能保存盖章后的图片。 （图片略丑，不要嫌弃） 效果图：点击保存后在下面显示的效果图：页面代码：<!DOCTYPE html
html中dom的可编辑属性（contenteditable）用法
yangyi
05-10 1281
1、contenteditable使用 contenteditable作为dom元素的可编辑属性，默认为false，当需要一个非input的标签需要编辑时只需设置该dom的contenteditable值为true即可。 //eg: <style type="text/css"> .box{ width: 400px; height: 100px; padding: 10px; background: #00B0F0; color: #FF0000; }
Contenteditable=“true“属性让HTML标签中的内容（如Div）可编辑（相当于Input、Textarea）
qhdzj87的专栏
01-18 2688
在HTML5中，我们可以给HTML标签设置contenteditable="true"属性实现用户在浏览器端对标签中的内容进行编辑。 例如： <div contenteditable="true">可以编辑里面的内容</div> Contenteditable属性兼容所有浏览器（IE6之前的版本是否兼容未测试），在有些时候我们完全可以用div去替代input或者textarea来实现数据的收集。例如，在使用ajax的时候，在提交表单时我们可以获取div的内容。...
HTML5 contenteditable属性应用场景
05-11
HTML5中的contenteditable属性用于设置元素是否可以被用户编辑。其应用场景包括： 1. 编辑器：contenteditable属性可以用于创建富文本编辑器，让用户可以在网页上直接编辑文本、插入图片、添加链接等。 2. 评论区：在评论区，contenteditable属性可以让用户直接在网页上输入评论内容，而无需跳转到其他页面。 3. 即时通讯：contenteditable属性可以用于创建即时通讯应用，让用户可以直接在网页上进行聊天。 4. 笔记应用：contenteditable属性可以用于创建在线笔记应用，让用户可以直接在网页上编写和保存笔记。 总之，contenteditable属性可以让网页变得更加交互性和直观化，提高用户的使用体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值