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

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. js在方法Ajax请求数据来推断，验证无效（OnClientClick=&quot;return Method();&quot;），或者直接运行的代码隐藏

    function CheckAdd() { var flag = true; $.ajax({ cache: false, async: false, url: "/ajaxpage/get ...

  2. java它 ------ 图形界面（两）

    <img src="http://img.blog.csdn.net/20150604093446275?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi ...

  3. Sql示例说明如何分组后求中间值--【叶子】

    原文:Sql示例说明如何分组后求中间值--[叶子] 这里所谓的分组后求中间值是个什么概念呢? 我举个例子来说明一下: 假设我们现在有下面这样一个表: type        name price -- ...

  4. ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传

    先上几张图更直观展示一下要实现的功能.本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2 ...

  5. 选中文件夹设定为IIS站点主目录的批处理bat

    原文:选中文件夹设定为IIS站点主目录的批处理bat 我使用的OS是winxp,安装的IIS版本为5.1,不支持多站点,下载的一些源代码想测试浏览一下就得设定虚拟目录,而且有些还必须设为站点根目录,每 ...

  6. JavaEE(16) - JPA生命周期及监听器

    1. 理解实体的生命周期 2. 为实体生命周期事件定义监听器 3. 通过监听实现回调 4. 排除默认监听器和父类上定义的监听器 1. 理解实体的生命周期(Net Beans创建Java Project ...

  7. 安装 CentOS 7 后必做的七件事

    原文 安装 CentOS 7 后必做的七件事 CentOS 是最多人用来运行服务器的 Linux 版本,最新版本是 CentOS 7.当你兴趣勃勃地在一台主机或 VPS 上安装 CentOS 7 后, ...

  8. EasyUI 扩展自己定义EasyUI校验规则 验证规则（经常使用的）

    比如 校验输入框仅仅能录入0-1000之间 最多有2位小数的数字 表单<input type="text" id="rate" name="ra ...

  9. android 之 下载管理器 无论监测在当地的设计思路

    我相信你.让应用市场.或其它下载,想不管是什么地方监测进展情况.而且很好的实现. 这里分享一个相对简单的,并防止内存溢出等..我们用一个引用弱结合View进展更新方法. Map<String, ...

  10. 使用linux服务logrotate文件tomcat日志文件

    使用notepad++编辑本地文件 tomcat: /usr/tomcat/logs/catalina.out { copytruncate daily dateext nocompress miss ...