首页 > 其他分享 >js过滤粘贴内容

js过滤粘贴内容

时间:2023-05-11 17:02:43浏览次数:31  
标签:js objEditor contentWindow 过滤 divTemp document ifmTemp newData 粘贴

<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>

 

标签:js,objEditor,contentWindow,过滤,divTemp,document,ifmTemp,newData,粘贴
From: https://www.cnblogs.com/jiunie/p/17391592.html

相关文章

  • inputstream转json
    inputstream是一个Java中的输入流,它允许从源读取数据。如果要将inputstream转换为JSON,需要使用相应的解析器,例如GSON或Jackson。以下是使用GSON的示例代码:InputStreaminputStream=...;Gsongson=newGson();JsonReaderreader=newJsonReader(newInputStreamReader(in......
  • 认证、权限、频率、过滤、排序、分页
    目录一、认证组件1.1登录接口1.2认证组件使用步骤1.3整体代码1.4认证时cookie的获取方式二、权限组件2.1需求分析:2.2权限的使用2.3代码三、频率组件3.1使用步骤3.2代码四、过滤排序4.0继承APIView自己写(伪代码,自己补齐)4.1内置过滤类的使用【使用前提是继承GenericAPIView......
  • 详解ASEMI代理亚德诺ADV7125JSTZ330芯片设计与应用
    编辑-ZADV7125JSTZ330是一款音视频芯片,其优秀的性能指标与广泛的应用场景获得了市场的青睐。本文从设计、功能、性能以及应用四个方面详细阐述ADV7125JSTZ330芯片的优势与特点,旨在更好的帮助读者了解这款芯片。 一、设计方面ADV7125JSTZ330使用了特殊的器件选型以及完整而成......
  • 能粘贴Word 内容(含图片)的HTML编辑器
    ​ 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。加入下面的代码://判断剪......
  • cJson学习(二)
    已剪辑自:https://blog.csdn.net/ZRXSLYG/article/details/122541036?spm=1001.2101.3001.6650.17&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-17-122541036-blog-123806149.235^v35^pc_relevant_default_base&depth_1-utm_......
  • https://pengchenggang.github.io/vuejsdev-com-github 备份发布
    https://pengchenggang.github.io/vuejsdev-com-github备份发布现在还没有解决的就是开clash,代码提交不上去,只能关了提,但是关了提交,也得赶运气。提交代码体验很差~......
  • js
    一、JS数据类型Number Boolean(只能有true或false)  Null  UndefinedJavaScript有以下几种类型:字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined)。JavaScript变量能够保存多种数据类型:数值、字符串值、数组、对象等等......
  • 【经验分享】在百度搜索引擎中的结果中,过滤指定的网站
    环境:系统版本:Windows10需求描述:描述:在搜索引擎中想在结果中过滤一些指定网站,快速找到有价值的内容。实现方法-视频与文字教程:视频教程:文字教程:1.进入百度搜索引擎,bing搜索引擎貌似不可以。www.baidu.com2.搜索内容如:锐捷无线AC基础命令-csdn,“-”这个符号是减号,0......
  • 基于kibana点点点点获取到 要懂得聚合查询json
    1.点击Visualize2.创建Table的visualization3.选择查询的索引4.勾选查询条件appName为delta-mainsysName为jdl-deltaappDeployPlatform为JDOS3_CN5.选择先按照resourceType进行第一层groupBy条件按照resourceType进行groupBy条件会出来如图所示,按照resourceType进......
  • Android 开发 利用 jq 在 Makefile 里给 output-metadata.json 增加字段
    Makefile:.PHONY:uploadupload:metadata #./push-apk.sh.PHONY:metadatametadata:app/build/outputs/apk/release/output-metadata.jsonapp/build/outputs/apk/release/output-metadata.json:buildupdate-content.txt #在Makefile中插入shell脚本要用双美元......