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"> 属性值 值 描述 ...
随机推荐
- Poj 3667
这是第一题线段树的区间合并的题: 这类的题用于求连续的最长长度什么的: 这题我看的是一篇比较不错的博客: 我把我的理解注释在代码里了: #include <iostream>#includ ...
- Easyui的combobox组件无法选择内容
我切换combobox的内容的时候,老是选中的是第一行的数据,因为我渲染的时候没有给它valueField和textField的字段,而默认的又不是我要求的. 加上就好了. $("#tool ...
- E题 - A+B for Input-Output Practice (IV)
Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Description You ...
- bzoj3583: 杰杰的女性朋友 && 4362: Graph
Description 给出一张n个点的有向图G(V,E).对于任意两个点u,v(u可以等于v),u向v的连边数为: ∑OUT(u,i) * IN(v,i),其中1<=i<=K 其中k和数 ...
- JQuery UI进度条——Progressbar
1.先引入jquery和jquery-ui的js,例子如下: <link href="JqueryUI/jquery-ui.css" rel="stylesheet ...
- Delphi文件映射
http://www.cnblogs.com/key-ok/p/3429860.htmlhttp://www.cnblogs.com/key-ok/p/3380793.htmlhttp://www.c ...
- WordPress Citizen Space插件跨站请求伪造漏洞
漏洞名称: WordPress Citizen Space插件跨站请求伪造漏洞 CNNVD编号: CNNVD-201307-463 发布时间: 2013-07-23 更新时间: 2013-07-23 ...
- 使用sklearn进行数据预处理 —— 归一化/标准化/正则化
一.标准化(Z-Score),或者去除均值和方差缩放 公式为:(X-mean)/std 计算时对每个属性/每列分别进行. 将数据按期属性(按列进行)减去其均值,并除以其方差.得到的结果是,对于每个属 ...
- 【26】Remove Duplicates from Sorted Array
[26]Remove Duplicates from Sorted Array Given a sorted array, remove the duplicates in place such th ...
- VMware宿主机和虚拟机的网络连接问题
今天在win8上装了个vmware虚拟机,却发现一个vmware workstation宿主机ping不通centos虚拟机,宿主机和centos虚拟机都可以正常上网. 问题描述:今天在vmware ...