contentEditable html中的一个属性。设置html的contentEditable=‘true’时,即可开启该元素的编辑模式。
Html中的contentEditable的属性可以打开某些元素的可编辑状态.也许你没用过contentEditable属性.甚至从未听说过.contentEditable的作用相当神奇.可以让div或整个网页,以及span等等元素设置为可写。我们最常用的输入文本内容便是input与textarea 使用contentEditable属性后,可以在div,table,p,span,body,等等很多元素中输入内容.
如果想要整个网页可编辑,请在body标签内设置contentEditable
contentEditable已在html5标准中得到有效的支持。
在IE8下设置表格可写不支持,其他元素没有问题。在FireFox运行一切正常。谷歌浏览器运行一切正常
使用方法
html中 <p contentEditable=“true”>;
js 中 document.all("txt").contentEditable =true;
应用
前段UI的美化,表单元素通过css样式不一定能达成设计师的要求,通过开启 div p span等元素的contentEditable,来实现表单元素的功能(需要js搭配)。
举例:
用于在textarea中除ie外不能插入图片。
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script>
function img(){
var location1 = prompt("请输入图片的地址:","http://");
if(location1){
selImg(location1);
}
}
function selImg(s){
if(!s){return false;}
var h=s.substr(s.lastIndexOf(".")+1,3);
if(h=="gif"||h=="jpg" || h=="GIF" || h=="JPG"){
Edit=document.getElementById("idEdit")
Edit.innerHTML+='<img src='+s+'>'
}
else{
}
}
</script>
<div NAME=EditCtrl id=idEdit contentEditable=true style="width:100%;height:200px;border:1px solid #666666"> <b>hubro</b>
</div>
<input type="button" name="Submit" value="插入图片" onclick="img()">
编辑本段HTML5中的解释与规定
contenteditable是一个枚举类型的属性,可供选择的值有 空字符串、 true、false 或 inherit(默认)。
当为空字符串时,效果和true一致。
当一个元素的contenteditable状态为ture(contenteditable属性为空字符串,或为true,或为inherit且其父元素状态为true)时,意味着该元素是可编辑的。
注意:HTML5与HTML4的不同,对于contentEditable HTML5是趋于xhtml,使用的是全小写contenteditable,而HTML4 使用的是contentEditable
-
1. HTML 5 全局 contenteditable 属性 .w3schoole [引用日期2012-10-14] .
相关推荐
angular-contenteditable, "contenteditable" 属性的Angular 模型 角 contenteditable 一个AngularJS指令,用于将html标记与 contenteditable 属性绑定到模型。安装bower install angular-contenteditable
当一个元素的contenteditable状态为ture(contenteditable属性为空字符串,或为true,或为inherit且其父元素状态为true)时,意味着该元素是可编辑的。 否则,该元素不可编辑。 更多html5相关信息请关注:...
利用contenteditable属性,div标签里的文本将可以编辑。借助execCommand,div标签的字体样式可以动态调整。源代码中包含了计算HTML文本结构、判断换行等功能,生成跟HTML所见一模一样的SVG文本。 yarn install ...
因此我们可以给HTML标签设置contenteditable="true"属性则可以对该标签进行编辑。 contenteditable属性兼容所有浏览器(IE6之前的版本是否兼容未测试) 在有些时候我们完全可以用DIV去替代input或者textarea来达到...
html5开发
主要是div通过contenteditable实现可编辑状态,可以实现按钮点击在光标处添加字符的功能
解压密码:RJ4587 记得之前我们分享过一款jQuery轻量级网页编辑器和CSS3可视化网页编辑器 基于tinymce编辑器,都非常实用,今天我们再来分享一款利用HTML5 contenteditable属性实现的简易网页编辑器,目前我们只实现...
用于contenteditable HTML属性的最大长度插件 用于contenteditable html属性的简单maxlength插件验证器,此插件不允许您放置超过指定的最大长度,还检查了从剪贴板粘贴的情况。 演示链接 安装 npm $ npm install ...
wysiwyg.js, 所见即所得contenteditable编辑器( 轻量级 跨浏览器 ) 示例:http://wysiwygjs.github.io/最近的更改:闪烁自由标记 API已经更改:Nov 3,2015: classes-> 类 按钮具有任何属性Mar 30,2015: camelcase ...
最近在做一评论功能,需要能够评论表情,那 contentEditable 这个属性就首当其冲了,结果,问题来了… 首先 评论区 长这样: 当输入内容超过限制的时候,清空用户输入超过限制后的内容。 这个好说… 但是清空...
NULL 博文链接:https://canlynet.iteye.com/blog/2340751
全局属性;全局属性简介;全局属性简介;draggable属性;draggable属性;hidden属性;spellcheck属性;spellcheck属性;contenteditable属性;contenteditable属性;总结;总结;感
使页面可编辑 扩展,使页面可编辑添加contenteditable属性的<body> 。按图标开始编辑,完成后再按一次。一旦页面重新加载更改你已经消失。 支持语言:English,русский
## Tuts +教程:使用contentEditable属性创建一个WYSIWYG编辑器 ###讲师:Monty Shokeen 在本教程中,我将说明如何使用contentEditable属性创建WYSIWYG编辑器。 即使它具有所见即所得(WYSIWYG)编辑器的所有常见...
contentEditable是由微软开发、被其他浏览器反编译并投入应用的一个全局属性。该属性的主要功能是允许用户编辑元素中的内容,所以该元素必须是可以获得鼠标焦点的元素,而且在点击鼠标后要向用户提供一个插入符号,...
freshereditor是基于构建的html编辑器,具有以下改进: 插件会自动构建工具栏,可以选择指定要隐藏的按钮(请参见示例) 支持文本对齐 支持字体大小和名称选择 支持使用内置颜色选择器进行前景和背景选择(使用...
内容可编辑通过向<body>添加contenteditable属性,使任何页面都可编辑。 按图标开始编辑,完成后再按一次。 重新加载页面后,您所做的更改就消失了。 适用于 , 和 。 根据MIT许可获得许可
依赖于emoji 库,主要是雪碧图实现表情的统一。...采用div标签的contenteditable属性实现编辑功能。 难点在于选择表情时的光标位置保存。实现任意光标位置插入表情。 实现一个小小的demo供大家参考, 共同学习!
先解释一下在线编辑器的原理:首先需要IE5.0以上版本的支持.因为IE5.0以上版本有一个编辑状态,designMode是document的属性,意思是设置或获取表明文档是否可被编辑的值,默认值为off或Inherit