js过滤粘贴内容
1
悬赏园豆：30
[已关闭问题]
关闭于 2013-07-10 08:35
需求是在向编辑器粘贴内容时，对剪贴板进行过滤，去除所有标签。
目前已经基本实现，但是在chrome内核的浏览器中还有个问题：必须首先输入内容，然后才能粘贴,不会自己获得焦点。麻烦大侠指点下，在线等啊。源码如下：
<html> <head> <title>Html Editor Filter</title> <style type="text/css"> .editor { border:1px solid #333333; } </style> </head> <body> <iframe src="iframeblankpage.html" id="editor" class="editor" frameborder="0" height="200" width="500"></iframe> <script type="text/javascript"> var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?true:false; function initEditor() { var ifrm=document.getElementById("editor") ifrm.contentWindow.document.designMode = "On"; ifrm.contentWindow.document.write("<body style=\"font-size:70%;font-family:Verdana,Arial,sans-serif;margin:0;min-height:20px\"></body>"); ifrm.contentWindow.document.close(); if(isIE) { ifrm.contentWindow.document.documentElement.attachEvent("onpaste", function(e){return pasteClipboardData(ifrm.id,e);}); } else { ifrm.contentWindow.document.addEventListener("paste", function(e){return pasteClipboardData(ifrm.id,e);},false); } } initEditor(); function getSel(w) { return w.getSelection ? w.getSelection() : w.document.selection; } function setRange(sel,r) { sel.removeAllRanges(); sel.addRange(r); } function filterPasteText(sHtml) { sHtml = sHtml.replace(/<.*?>/ig, ''); return sHtml; } function filterPasteData(originalText) { return filterPasteText(originalText); } function block(e) { e.preventDefault(); } var w,or,divTemp,originText; var newData; function pasteClipboardData(editorId,e) { var objEditor = document.getElementById(editorId); var edDoc=objEditor.contentWindow.document; if(isIE) { var orRange=objEditor.contentWindow.document.selection.createRange(); var ifmTemp=document.getElementById("ifmTemp"); if(!ifmTemp) { ifmTemp=document.createElement("IFRAME"); ifmTemp.id="ifmTemp"; ifmTemp.style.width="1px"; ifmTemp.style.height="1px"; ifmTemp.style.position="absolute"; ifmTemp.style.border="none"; ifmTemp.style.left="-10000px"; ifmTemp.src="iframeblankpage.html"; document.body.appendChild(ifmTemp); ifmTemp.contentWindow.document.designMode = "On"; ifmTemp.contentWindow.document.open(); ifmTemp.contentWindow.document.write("<body></body>"); ifmTemp.contentWindow.document.close(); }else { ifmTemp.contentWindow.document.body.innerHTML=""; } originText=objEditor.contentWindow.document.body.innerText; ifmTemp.contentWindow.focus(); ifmTemp.contentWindow.document.execCommand("Paste",false,null); objEditor.contentWindow.focus(); newData=ifmTemp.contentWindow.document.body.innerHTML; //filter the pasted data newData=filterPasteData(newData); ifmTemp.contentWindow.document.body.innerHTML=newData; //paste the data into the editor orRange.pasteHTML(newData); //block default paste if(e) { e.returnValue = false; if(e.preventDefault) e.preventDefault(); } return false; }else { enableKeyDown=false; //create the temporary html editor var divTemp=edDoc.createElement("DIV"); divTemp.id='htmleditor_tempdiv'; divTemp.innerHTML='\uFEFF'; divTemp.style.left="-10000px"; //hide the div divTemp.style.height="1px"; divTemp.style.width="1px"; divTemp.style.position="absolute"; divTemp.style.overflow="hidden"; edDoc.body.appendChild(divTemp); //disable keyup,keypress, mousedown and keydown objEditor.contentWindow.document.addEventListener("mousedown",block,false); objEditor.contentWindow.document.addEventListener("keydown",block,false); enableKeyDown=false; //get current selection; w=objEditor.contentWindow; or=getSel(w).getRangeAt(0); //move the cursor to into the div var docBody=divTemp.firstChild; rng = edDoc.createRange(); rng.setStart(docBody, 0); rng.setEnd(docBody, 1); setRange(getSel(w),rng); originText=objEditor.contentWindow.document.body.textContent; if(originText==='\uFEFF') { originText=""; } window.setTimeout(function() { //get and filter the data after onpaste is done if(divTemp.innerHTML==='\uFEFF') { newData=""; edDoc.body.removeChild(divTemp); return; } newData=divTemp.innerHTML; // Restore the old selection if (or) { setRange(getSel(w),or); } newData=filterPasteData(newData); divTemp.innerHTML=newData; //paste the new data to the editor objEditor.contentWindow.document.execCommand('inserthtml', false, newData ); edDoc.body.removeChild(divTemp); },1); //enable keydown,keyup,keypress, mousedown; enableKeyDown=true; objEditor.contentWindow.document.removeEventListener("mousedown",block,false); objEditor.contentWindow.document.removeEventListener("keydown",block,false); return true; } } </script> </body> </html>
所有回答(1)
0
在谷歌浏览器下：
ifrm.contentWindow.document.write("<body style=\"font-size:70%;font-family:Verdana,Arial,sans-serif;margin:0;min-height:20px\"><br></body>");
