首页 新闻 赞助 找找看

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>
敬YES的主页 敬YES | 菜鸟二级 | 园豆:490
提问于:2013-07-07 23:42
< >
分享
所有回答(1)
0

在谷歌浏览器下:

 ifrm.contentWindow.document.write("<body style=\"font-size:70%;font-family:Verdana,Arial,sans-serif;margin:0;min-height:20px\"><br></body>");

敬YES | 园豆:490 (菜鸟二级) | 2013-07-10 08:35
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册