html contenteditable
contenteditable 是html中的一個屬性,在HTML中,某些元素設置 contenteditable='true' 屬性時可以開啟該元素的編輯模式,contenteditable 可以讓div 或整個網頁,或者span等等元素設置為可寫,我們最常用的是 input 、textarea 文本輸入元素來輸入內容,但這些也只能夠輸入純文本,而 contenteditable 開啟後能夠輸入html內容。
如果想在整個網頁可編輯,請在 body 標籤內設置 contenteditable
contenteditable 已在 html5 標準中得到有效的支持
使用方法:
<div contenteditable='true'></div>
HTML5 中的解釋與規定:
document.execCommand('InsertImage', false,imgsrc);
現在開始有點樣子了,但是除了圖片還有一些基本的排版的html標籤之外,我不想用戶過多的插入一些其他的html。例如字體加粗,下劃線等,也就是雖然我沒有給用戶提供更多的操作這些功能的按鈕,但是防止不了用戶去複製別人的html,然後粘貼進來,所以我要想辦法做一些過濾,這時候我應該要監聽粘貼命令:
if(divEdit.addEventListener){
divEdit.addEventListener("paste",pasteFilter,false);
}else{//IE
divEdit.attachEvent("onpaste",pasteFilter);
}
一但有這個操作,我就要確保在內容粘貼出來前或者後進行一些處理:
function pasteFilter(){
var clipb = event.clipboardData || window.clipboardData;
try{
var cHtml = clipb.getData('text/html');
cHtml = HtmlFilter(cHtml);
document.execCommand('inserthtml', false,cHtml);
event.preventDefault;
event.returnValue = false;
}catch(e){//IE下面的操作
setTimeout(function(){editDiv.innerHTML = HtmlFilter(editDiv.innerHTML);},1);
}
}
上面這一步我有分了兩部分,在ie外的其他瀏覽器下面,(當然我只測試過firefox,chrome)try裏面適合不是ie瀏覽器下面的,因為在ie下面javascript 的 clipboardData 對象的 getData方法裏面不支持 text/html ,只支持text ,而且在ie下面,也不支持 execCommand 裏面的inserthtml 參數, 所以在我沒有找到其他更好辦法之前,我也只能做這樣的處理,ie下面我用到了setTimeout的方法,原理就是在粘貼數據的那一刻,同時執行HtmlFilter這個方法,對編輯框裏面的html作過濾,這個方法有不好之處就是當粘貼那一刻,用戶是能看到粘貼過來的樣式等等效果的,只不過以最快的速度再一次將編輯框裏面的內容用js去進行一遍的過濾罷了,這方法雖然不好,但基本能達到我現在想要的要求。
function HtmlFilter(html){
html = html.replace(/(style|class|id)[=\s]+?".*?"/ig,'');
html = html.replace(/<\!--(Start|End)Fragment-->/ig,'');
return html;
}
當然,用js過濾一遍,這只不過適合於大多數的情況下,若用戶提交了沒有經過過濾的html內容,這時候,也只能夠在服務器端進行最終的過濾了。
html contenteditable的更多相关文章
- IOS中div contenteditable=true无法输入
在IOS中<div contenteditable="true"></div>中点击时可以弹出键盘但是无法输入.加一个样式-webkit-user-sele ...
- 苹果手机IOS中div contenteditable=true 仿文本域无法输入编辑
问题: 在苹果手机IOS中 contenteditable="true" 做文本域输入,点击可以弹出键盘但是无法输入,安卓都正常. 经测试后,记得加一个样式 -webkit-use ...
- H5之contenteditable
场景: <div id='content' contenteditable='true' > hello </div> <button id='caret'>设置光 ...
- contentEditable属性设置是否可编辑元素的内容
在HTML5中在标签新添加了一个属性contentEditable可以设置标签内的内容是否可以编辑: 设置contenteditable="true"标签内的元素(内容)可以编辑 ...
- contenteditable
http://www.w3school.com.cn/tags/att_global_contenteditable.asp 做编辑器经常用这个属性 使得整个编辑区域所见所得 http://www.c ...
- div contenteditable placeholder
contenteditable型的编辑框,实现placeholder的方式有两种 第一种,Css的实现方式: <!DOCTYPE html> <html lang="en& ...
- div的contenteditable和placeholder蹦出的火花
今天在做手机端发布描述内容时,需要实现换行,还需要有plachholder. 在文本框中换行自然想到了textarea. 问题似乎已经解决了,但是当内容发布后,在html中显示换行都丢失了. 这个时候 ...
- Text selection in div(contenteditable) when double click
背景: 在最近项目中,碰到一个问题:有一个可编辑的div需要双击时可编辑,blur或者回车时将编辑结果保存.你可能注意到双击时,文字会被选中,可编辑区域不会focus到光标位置.考虑到兼容性问题,写了 ...
- contenteditable 属性
定义和用法 contenteditable 属性规定是否可编辑元素的内容. 语法 <element contenteditable="value"> 属性值 值 描述 ...
随机推荐
- Flask 富文本编辑器
XHEditor http://segmentfault.com/blog/digwtx/1190000002439076 CKeditor http://segmentfault.com/blog/ ...
- cocos2dx调度器scheduler
/ 让帧循环调用this->update(float dt)函数 // scheduleUpdate(); // 让帧循环去调用制定的函数,时间还是1/60秒 // schedule(sched ...
- js的引用顺序
注意:Bootstrap中的JS插件依赖于JQuery,因此JQuery要在Bootstrap之前引用!!! 把JS文件引用放入body的最下面,是为了使js在网页全部加载完后才起作用,比如你的js里 ...
- test知识
内部测试SIT ——system integration testcase 用户测试UAT——user acceptance test SIT是集成测试UAT是验收测试从时间上看,UAT要在SIT后面 ...
- linux中ls、ls -l、ls -al、ll命令
ls只是简单的列出目录下文件名,ll更加详细的列出了文件的类型.文件所有者权限.文件所有者组权限.文件大小.文件最后修改时间,etc... 我们可以用一个简单的图来说明,如下图1: 图1 1.第一位就 ...
- 工业CF卡与商业CF卡对比
工业CF卡:1.SLC FLASH芯片 .每个区块读写次数为10万次 2.可分区 识别为本地磁盘 3.平均写入技术.ECC自动校验技术 4.完全模拟硬盘引导系统开机,支持长期稳定工作 商业CF卡:1. ...
- TControl的显示函数(5个非虚函数,4个虚函数)和三个例子的执行过程(包括SetParent的例子)
// 9个显示函数 procedure SetBounds(ALeft, ATop, AWidth, AHeight: Integer); virtual; // 虚函数,important 根据父控 ...
- 关于SVN的操作批处理示例
关于SVN的操作批处理示例 为了一句话:不要动手做机器能够做的事情. 天天工作用svn,更新啥的打开目录啥的动作天天在重复.每次写些命令也蛮无聊的,不说了,看下面: 1 @echo off 2 rem ...
- 输出password
- 在外国网站上看到一个用artoolKit做的demo,学习了用gcd创建单列
外国网站:http://www.raywenderlich.com/42266/augmented-reality-ios-tutorial-location-based 看了下里面的demo,源代码 ...