可编辑的段落contenteditable

最新推荐文章于 2022-11-08 14:18:40 发布
最新推荐文章于 2022-11-08 14:18:40 发布
阅读量580 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： html+css 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq379682421/article/details/78913472
本文介绍了HTML5中新增的contenteditable属性，该属性允许页面中的指定元素变为可编辑状态，如将普通的div或p标签内容变为类似input框可直接编辑的形式。文中还提到了contenteditable的不同设置选项及其应用。

可编辑的段落contenteditable

突然发现一个有趣的东西

<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>

可以让p标签内的内容变成像input一样的可编辑状态

div、span等标签也是可以的。。

html5的新属性：contenteditable属性

true 规定可以编辑元素内容。
false 规定无法编辑元素内容。
classname 继承父元素的 contenteditable 属性。

（1）change事件不会生效

contentEditable,window.getSelection详解---可编辑div，容器，设置/获取光标位置，光标处插入内容及光标的操作
codingWeb的博客
11-07 9422
这周碰到一个骚东西，contentEditable ，它是用来指定一个元素是否是可编辑的，这也是富文本编辑器实现的底层支持，网上关于这部分东西的资料比较少或者不全，所以我来整理下关于这个属性，和可编辑区域的一些操作吧，比如获取光标位置，设置光标，往可编辑区域光标处插入内容等等 HTML中的contentEditable的属性可以打开某些元素的可编辑状态．也许你没用过contentEditable属性．甚至从未听说过．contentEditable的作用相当神奇．可以让div或整个网页，以及span等等元素
h5新属性，可编辑的段落 contenteditable=“true”
weixin_34187862的博客
06-11 346
h5新属性，可编辑的段落 contenteditable=“true” HTML 5 全局 contenteditable 属性 HTML 5 全局属性 实例 一段可编辑的段落： <p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p> 亲自试一试 ...
contenteditable 属性规定元素的内容是否可以编辑
4亿少女梦的博客
01-16 1058
---contenteditable 属性规定元素的内容是否可以编辑。--- &amp;amp;amp;amp;amp;amp;lt;div contenteditable=&amp;amp;amp;amp;amp;quot;value&amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;amp;amp;gt
css编辑段落文章，段落变得好看些
jia2799897415的博客
04-07 855
直接给p标签样式（移动端和PC端通用） p{ margin:1em 0; padding:0 0 0 2em; text-indent:-1.5em; font:normal normal 16px/1.6em "宋体"; color:#000; }
CSS控制段落
fly
03-16 1370
1.段落缩进 text-indent 2.文本对齐 text-algin(水平对齐方式) 值：1.left 2.right 3.center 3.文本装饰线 text-decoration 值: 1.underline[文本下划线] 2.overlinn[文本上一条线] 3.line-through[文本穿越线] ...
js实现文本段落增删改查
weixin_45712645的博客
05-10 486
JS <script> function addNode(){ var box = document.getElementById("box") var p = document.createElement("p")//新建一个p元素 var txt = document.createTextNode("段落三") p.appendChil
contenteditable
04-29
具有混合编辑器（每个段落都是可编辑的行；与相同） 忽略contentEditable并维护自己的内部模型（以避免处理x浏览器的不一致和复杂性）； 与相同 contentEditable =最小 为了使站点，框架和浏览器更简单，启用新的...
利用contenteditable属性实现div可编辑，控制插入节点
最新发布
09-03
下面详细介绍如何使用 `contenteditable` 属性实现 `div` 可编辑并控制插入节点的方法。 ### 基本实现可编辑 `div` 首先，给 `div` 元素添加 `contenteditable="true"` 属性，就能让这个 `div` 变成可编辑状态。...
normalize-contenteditable：规范化内容可编辑功能的统一标签使用
资源摘要信息:"normalize-contenteditable:内容可编辑块中的所有文本都应包含在标签" "normalize-contenteditable" 是一个针对HTML内容可编辑区域（contenteditable）进行标准化处理的JavaScript库。在HTML5中，...
Prosemirror 是一个基于 ContentEditable 的所见即所得 HTML 编辑器，功能强大，支持协作编辑和自定义文档模式Prosemirror 库由多个单独的模块
04-03
Prosemirror是一个开源的所见即所得HTML编辑器，它采用了浏览器内置的ContentEditable功能，将网页的富文本编辑能力提升到了新的高度。其所具备的协作编辑功能意味着它可以在多人同时工作的环境中使用，极大地提高了...
html可编辑段落,javascript – HTML5内容列表后的可编辑段落
weixin_34792402的博客
06-10 136
Bryan Allo发布的答案没有考虑到你需要将光标放在div的末尾.否则,每次替换操作时,用户都必须按CTRL-End.function setEndOfContenteditable(contentEditableElement){// Taken from https://stackoverflow.com/a/3866442/1601088var range,selection;if(do...
记录一下剪切板功能
whmJack的博客
11-08 284
剪贴板
contentEditable属性设置是否可编辑元素的内容
weixin_34363171的博客
07-26 702
在HTML5中在标签新添加了一个属性contentEditable可以设置标签内的内容是否可以编辑： 设置contenteditable="true"标签内的元素(内容)可以编辑 1 &lt;!DOCTYPE HTML&gt; 2 &lt;html&gt; 3 &lt;body&gt; 4 5 &lt;div contenteditable="true"&gt;这是一段...
html -- contenteditable 属性：指定元素内容是否可编辑
weixin_34393428的博客
07-27 587
所有主流浏览器都支持 contenteditable 属性   定义和用法 contenteditable 属性指定元素内容是否可编辑。 注意： 当元素中没有设置 contenteditable 属性时，元素将从父元素继承。 contenteditable 属性是 HTML 新增的。   true：可编辑 false：不可编辑 或者 带contenteditable的，可编辑 ...
contenteditable 让你的标签可编辑
熊小露的博客
11-24 783
实例 一段可编辑的段落： <p contenteditable="true">这是一个可编辑的段落。</p> 定义和用法 contenteditable 属性规定元素内容是否可编辑。 注释：如果元素未设置 contenteditable 属性，那么元素会从其父元素继承该属性。 属性值 值 描述 true 规定元素可编辑。 false 规定元素不可编辑。 ...
内容可编辑contenteditable
热门推荐
xxxxxMiss的博客
04-06 1万+
前言最近遇到一个问题：文本域的高度随输入内容的多少自适应，就像是这样的： 刚刚拿到这个问题，就想到用textarea来搞定，尝试了一下，虽然也搞定了，但总感觉有点麻烦。仔细思考一番，想到貌似h5有个contenteditable全局属性也可以实现文本编辑，遂尝试搞起。contenteditable是什么？MDN上是这样描述的： The contenteditable global attr
Vue简易实现mavonEditor文章回显（编辑及普通阅读）
weixin_43259821的博客
02-18 3800
写在前面： 关于mavonEditor文章的保存，我保存了content和html。 基本思路是在普通阅读时利用v-html去显示axios请求到的数据库里面保存的html；而在编辑情况，则仿照新增文档时，用v-model绑定content，然后通过axios请求到数据库保存的content和html，再将它们分别赋值给Vue中的content和html，即可实现编辑回显功能。 普通阅读： &lt...
在线可编辑Web Word编辑器功能实现
- 必须有一个或多个可编辑的容器元素，通常是`<div>`或`<span>`，通过设置`contenteditable="true"`属性。 - 可以使用`<iframe>`作为编辑区域，这样便于管理复杂的布局和格式。 2. **CSS样式**： - 需要使用CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值