html contenteditable
来源:互联网 发布:linux下如何删除用户 编辑:程序博客网 时间:2024/05/01 18:53
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
- html contentEditable属性
- html全局属性-contenteditable
- html中contentEditable属性
- HTML 5 全局 contenteditable 属性
- html中的contenteditable、hidden、spellcheck
- contentEditable
- contenteditable
- 开启Html编辑模式的contentEditable属性
- contenteditable编辑框防止不安全HTML代码
- Javascript/HTML的几个问题(ContentEditable,Selection and cursor style)
- html5开发教程:开启Html编辑模式的contentEditable属性
- 开启html元素的编辑模式contenteditable="true"
- 重新认识HTML系列004——全局属性contenteditable
- contenteditable编辑器
- contentEditable属性
- contenteditable属性
- html contenteditable="true" ctrl+v黏貼時會帶標籤的處理方式
- JavaScript--execCommand指令集
- MySQL索引原理及慢查询优化
- 编译安装zabbix3.0 server端
- HDU 5625 Clarke and chemistry(水~)
- 改你MB需求!
- html contenteditable
- 四点求解单应性矩阵
- mysql lower-case-table-names参数
- 根据IP地址获取IP的详细信息
- 2. sales quote merge before
- Intel汇编语言程序设计学习-第二章 IA-32处理器体系结构-下
- Android属性动画解析,Interpolator和ViewPropertyAnimator的用法
- Educational Codeforces Round 15
- 迭代器的使用实例