实现复制粘贴文本过滤（保留文字和图片）

demo如下：

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title></title>

  <base href=""/>

  <style type="text/css">

  </style>

 </head>

 <body>

    <div id="conversation-content" contenteditable="true" style="width:500px;height:300px;background:#f00;">

    </div>

 </body>

</html>

<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>

<script type="text/javascript">

    function filterHtml(str,callback){

    var s = '';

    var imgWidth = 200;

    var d = str.replace(/(&nbsp;)/ig,'');//先过滤空格

    var sd = d.replace(/<br([^<>]+|\s?)>/ig,'||||');//替换br标签

    var div = document.createElement('div');

    div.id = 'cache_Id';

    div.style.display = 'none';

    div.innerHTML = sd;

    document.body.appendChild(div);

    var dssD = document.getElementById('cache_Id');

    var text = dssD.innerText;//过滤html标签

    text = text.replace(/\|\|\|\|/g,'<br>');//还原br

    var imagesCount = 0;

    try{

        var temp = '';

        var img = dssD.getElementsByTagName('img');

        if(img.length > 0){

            for(var i=0;i<img.length;i++){

                var imgObj = new Image();

                imgObj.onload = function(){

                    imagesCount++;

                    var w = this.width;

                    var h = this.height;

                    if(w > imgWidth){

                        temp += '<img src="'+ this.src +'" width="'+ imgWidth +'" /><br>';

                    }else{

                        temp += '<img src="'+ this.src +'" width="'+ w +'" /><br>';

                    }

                    if(imagesCount == img.length){

                        text+=temp;

                        s = text;

                        var n = document.getElementById('cache_Id');

                        if(n && n.parentNode && n.tagName != 'BODY'){

                            n.parentNode.removeChild(n);

                        }

                        if(callback){

                            callback(s);

                        }

                    }

                }

                imgObj.onerror = onabort = function(){

                    console.log(imagesCount);

                    imagesCount++;

                     if(imagesCount == img.length){

                        s = text;

                        var n = document.getElementById('cache_Id');

                        if(n && n.parentNode && n.tagName != 'BODY'){

                            n.parentNode.removeChild(n);

                        }

                        if(callback){

                            callback(s);

                        }

                    }

                }

                imgObj.src = img[i].src;

            }

        }else{

             s = text;

            var n = document.getElementById('cache_Id');

            if(n && n.parentNode && n.tagName != 'BODY'){

                n.parentNode.removeChild(n);

            }

            if(callback){

                callback(s);

            }

        }

    }catch(e){

       console.log(e);

    }

}

$('#conversation-content')[0].onpaste = function(){

    console.log(1);

    setTimeout(function(){

         filterHtml($('#conversation-content').html(),function(str){

            $('#conversation-content').html(str);

        });

    },300);

}

</script>

js 实现复制粘贴文本过滤（保留文字和图片）的更多相关文章

  1. js 实现复制粘贴

    js 实现复制粘贴 <!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" ...

  2. js实现复制粘贴功能

    在项目中使用到复制粘贴功能,虽然网上有很多大牛封装了很多的插件,但是还是想不去使用插件,就像自己来实现这个功能. 另一篇是禁止复制粘贴 前端er怎样操作剪切复制以及禁止复制+破解等 初步想法: 1. ...

  3. 通过如何通过js实现复制粘贴功能

    在ie中window.clipboardData(剪切板对象)是可以被获取,所以利用这个方法我们可以实现在IE当中复制粘贴的功能,demo如下! <html> <head> & ...

  4. ueditor编辑文章时候，复制粘贴内容，原来的图片不能显示

    ueditor编辑文章时候.当现有文章有图片的时候, 再复制粘贴文本进去的时候.里面的图片就不能显示了, 编辑器查看文章Html代码,图片路径显示为:src="http://localhos ...

  5. 在html页面通过js实现复制粘贴功能

    前言:要实现这个功能,常用的方式大概分为两类,第一种就是上插件,这个网上有大把,第二种就是直接用几行JS来实现. 这次说第二种实现方式,这方式有很大的局限性,只能用表单元素,并且不能设置disable ...

  6. JS ----实现复制粘贴功能 (剪切板应用clipboardData)

    注意:ie7,与ie8 对网页有个复制的权限,需在“安全”中的“自定义级别”的脚本中设置 clipboardData 对象 提供了对剪贴板的访问. 三个方法 :1.clearData(sDataFor ...

  7. js实现复制粘贴

    项目中经常会遇到点击按钮复制订单号.订单id等内容到粘贴板中的需求.可是通常我们都是用Ctrl + c或右击复制的,别操心,js也是有复制命令的,那就是document.execCommand('co ...

  8. [JavaScript] 怎么使用JS禁止复制粘贴

    1. 将彻底屏蔽鼠标右键,其实是禁止快捷菜单,因为不光右键可以弹出这个菜单,键盘上空格键右边的windows键也可以激活这个快捷菜单 <table border oncontextmenu=re ...

  9. js 实现复制粘贴时注意方法中需要两次点击实现的bug

    方法一:利用ZeroClipboard 详见 :http://www.jb51.net/article/22403.htm 1先引入 <script type="text/javasc ...

随机推荐

  1. NSIS：禁止多次安装实例

    原文 NSIS:禁止多次安装实例 为了防止用户重复安装软件,我们可以加入以下的判断来进行限制. 第一步:在安装脚本中,将是否已安装的标记Installed写入注册表中: 1 Section -Post ...

  2. CIC 抽取滤波器 Verilog Code

    采用流水线结构的CIC 抽取滤波器结构如下: // 三级CIC抽取器实例:cic3_decimator.V module cic3_decimator(clk, x_in, y_out); param ...

  3. Android SDCard Mount 流程分析

    前段时间对Android 的SDCard unmount 流程进行了几篇简短的分析,由于当时只是纸上谈兵,没有实际上的跟进,可能会有一些误导人或者小错误.今天重新梳理了头绪,针对mount的流程再重新 ...

  4. 华为-on练习--重复的字符过滤

    称号: 请写一个字符串过滤程序,如果使用多个相同的字符出现在字符串中,字符首次出现在非过滤,. 比方字符串"abacacde"过滤结果为"abcde". 演示样 ...

  5. asp.net下cookie 的基础使用

    cookie作为在B/S开发中经常被使用到的东西,asp.net必然提供了现成的东西给我们使用. 就是这个对象:HttpCookie,当然了,对于asp.net来说,Request和Response中 ...

  6. CentOS 7 下安装 LEMP 服务(nginx、MariaDB/MySQL 和 php)

    原文 CentOS 7 下安装 LEMP 服务(nginx.MariaDB/MySQL 和 php) LEMP 组合包是一款日益流行的网站服务组合软件包,在许多生产环境中的核心网站服务上起着强有力的作 ...

  7. java数据结构系列——排列（2）：有序阵列

    package Array; /** * 对数组排序.当添加到阵列保持有序数组元素: * @author wl * */ public class MyOrderArray { private lon ...

  8. linux_安装_安装编译phantomjs 2.0的方法_转

    项目中要对数据公式webkit渲染,phantmjs 2.0的效果好比1.9好不少. 安装过程中 坑比较多. 转载文章: phantomjs 2.0最新版的官方不提供编译好的文件下载,只能自己编译,有 ...

  9. 【高德地图API】汇润做爱地图技术大揭秘

    原文:[高德地图API]汇润做爱地图技术大揭秘 昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以 ...

  10. http协议报头信息和主体鉴别

    http协议报头信息和主体是使用一个空行分开.这是什么空行?简单的说,那是,\r\n\r\n. 所以会server数据的回归\r\n\r\n结果分离,一个是标题信息.它是一个消息的文本. C#例如,下 ...