使HTML标签可编辑 （在线编辑器） contenteditable

最新推荐文章于 2023-12-13 21:13:56 发布
最新推荐文章于 2023-12-13 21:13:56 发布
阅读量309 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/baie/archive/2012/08/06/2625669.html
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>在线编辑器（contenteditable）</title>
<style>
div { width:500px; height:100px; word-wrap:break-word; word-break:normal; background:#F5F5F5; border:1px solid #EBEBEB; padding:10px 20px; font-size:14px; color:#333; line-height:24px; }
</style>
</head>

<body>
<div contenteditable="true">
设置标签属性contenteditable="true"，即可在任何容器内输入内容，兼容所有浏览器。此方法结合CSS的word-wrap:break-word;(单词截断)及word-break:normal(允许在字内换行)可用来做在线编辑器。
</div>
</body>
</html>

转载于:https://www.cnblogs.com/baie/archive/2012/08/06/2625669.html

aaysi2826
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML文本编辑标签
qq_59933216的博客
12-31 815
HTML基础——文本编辑标签：HTML标题、HTML段落、HTML换行、 HTML缩小文字、HTML保留文本格式、HTML注释（注音等）、HTML下标、HTML上标、HTML粗体、HTML斜体、HTML高亮、HTML分割线、HTML删除线、HTML下划线、HTML缩写、 HTML文本显示方向、HTML插入图片、HTML超链接。下一期我将出一个网页新闻的小案例巩固今天所学的内容！
普通标签变成可编辑的标签
shadow_yi_0416的博客
01-10 202
除了表单元素input之外，其他标签转为可编辑标签只需要一个属性就行 contenteditable <div class="scoll-bar" contenteditable="true"> <p>好多鱼好多鱼好多好多鱼，好多鱼好多鱼好多好多鱼，好多鱼好多鱼好多好多鱼，好多鱼好多 </div> ...
html标签的可编辑设置-contenteditable
weixin_41956327的博客
10-18 259
在聚焦以后，如果不想对聚焦的元素有拖拽的效果，那么在元素的属性上添加οndragstart="return false"即可。在不可编辑的标签上，添加contenteditable属性，就可以对这个标签进行编辑修改。
HTML的contentEditable属性
09-22 2980
Sets or retrieves the string that indicates whether the user can edit the content of the object.SyntaxHTMLELEMENT CONTENTEDITABLE = sCanEdit... > Scripting
HTML5 contenteditable属性
Leayh
06-12 1058
背景 今天在项目开发过程中通过接口拿到了第三方返回的dom节点，结果发现展示到页面上会出现编辑框，然后查看了代码发现该标签内添加了contenteditable = true属性，由于之前没有用到过这个属性，遂上网查了一下。 学习 定义：contenteditable属性规定是否可编辑元素的内容。 语法： &lt;element contenteditable="value"&gt;...
编辑器中designMode和contentEditable的属性的介绍
10-30
若要让整个页面可编辑，可以在`<body>`标签中设置`contentEditable="true"`： ```html <body contentEditable="true"> <!-- 整个页面都可以编辑了 --> ``` `contentEditable`的兼容性更广泛，不仅适用于IE，还...
html5文本编辑器_在线文本编辑器_富文本编辑器
11-02
1. 数据存储：富文本编辑器生成的内容通常包含HTML标签，需要在服务器端进行适当的处理，例如转义特殊字符，防止XSS攻击。 2. 兼容性：虽然HTML5的普及率越来越高，但在支持较弱的浏览器中，可能需要使用polyfill或...
只需一行代码,轻松实现一个在线编辑器
09-04
标题中的“只需一行代码,轻松实现一个在线编辑器”指的是利用HTML5的`contenteditable`属性，可以在浏览器中快速创建一个简易的在线编辑器。这个属性允许任何HTML元素变为可编辑区域，用户可以直接在浏览器页面上...
在线编辑器的实现原理(兼容IE和FireFox)
10-31
在线编辑器的实现原理主要涉及Web页面中的富文本编辑功能，尤其关注如何使其在不同的浏览器，如Internet Explorer（IE）和Firefox中保持兼容性。在本文中，我们将深入探讨在线编辑器的核心技术，并通过示例代码展示...
H5新特性之h5的新标签 以及 全局属性contenteditable
最新发布
@素素~的博客
12-13 370
H5新特性之h5的新标签 以及 全局属性contenteditable
使用contentEditable属性创建一个内联文本编辑器
代码教主
06-11 674
创建内联编辑器需要付出很多努力。 首先，使用input或textarea字段切换要编辑的元素。 为了获得无缝的用户体验，您可能还必须使用一些CSS才能将交换元素的样式与原始样式相匹配。 用户完成编辑后，将所有内容复制到原始内容后，您将不得不再次切换元素。 contentEditable属性使此任务更加容易。 您所要做的就是将此属性设置为true ，标准HTML5元素将变为可编辑的。 在本教...
关于contenteditable属性
weixin_30727835的博客
12-24 188
今天刷刷空间，看到了发说说框，发现居然不是textarea的，百思不得其解围。后来看到contenteditable，心想应该就是这个搞怪的吧，百度了下。w3c的解释是contenteditable属性规定元素内容是否可编辑。里面只有true或者false;默认false，加个true后，div、p、等等非输入标签都是可以输入。而且主流浏览器都是支持，包括IE7 转载于:https://www.c...
html最强富文本 contenteditable
qq_25547755的博客
10-12 179
html根元素添加 contenteditable ，整个网页 编辑 修改 复制 元素添加contenteditable 或 ="true"，即变为 富文本编辑。html元素默认 contenteditable="false" ，页面不可编辑。3.支持复制粘贴图片，所见即所得。html 太强大了
html设置可编辑状态,HTML5 - 使某个页面元素或整个页面可编辑
weixin_33992214的博客
05-30 3979
1，把任何元素的contenteditable属性设置成true，点击即可以编辑该元素的内容contenteditable="true">你可以编辑这段文本2，也可以使用js来动态的开启和关闭编辑功能//让元素可以编辑function startEdit(){var element = document.getElementById("editableDiv");element.conten...
基于contenteditable属性的简易web在线编辑器
小易的博客
06-20 8321
本文用元素的contenteditable属性实现了一个非常简易的文本编辑器。
通过Content Editor来增加页面的控制
dixiangqie0365的博客
11-05 128
利用Content Editor，可以对任意一个SharePoint的页面进行简单控制，如不想修改WebPart的情况下，对某些页面输出做一些修改。如，我使用这种方法，将某些标题的格式作了修改。 方法： 在页面中需要修改内容的WebPart后面增加一个Contenxt Editor，将一段修改用的JavaScript代码写入到Editor的Source Viewer中即可。 ...
给html标签添加 contenteditable 属性，可实现页面可编辑的效果
luzhaopan的博客
08-04 3819
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>contenteditable</title> </head> <body> <div contenteditable style="border:1px ...
如何使html页面中的文本变为可编辑的？
wsxqaz的专栏
10-17 3241
可以实现, 通过contentEditable属性而且勿需JS,如: 我的主页 我的主页 我的主页 我的主页 这样就可以选中对象并进行相应的编辑
html可编辑表格
05-25
可以使用`<table>`标签创建一个可编辑的表格，可以使用`<td>`标签创建单元格。然后，可以使用JavaScript来使表格具有可编辑性。下面是一个示例代码： HTML代码： ``` <td contenteditable="true">1 <td ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值