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

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. Docker简明教程（转）

    Docker自从诞生以来就一直备受追捧,学习Docker是一件很炫酷.很有意思的事情.我希望通过这篇文章能够让大家快速地入门Docker,并有一些学习成果来激发自己的学习兴趣.我也只是一个在Docke ...

  2. jquery的智能提示控件

    福利到~分享一个基于jquery的智能提示控件intellSeach.js   一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管 ...

  3. linux中fork（）函数具体解释（原创！！实例解说）

     一.fork入门知识 一个进程,包含代码.数据和分配给进程的资源.fork()函数通过系统调用创建一个与原来进程差点儿全然同样的进程,也就是两个进程能够做全然同样的事,但假设初始參数或者传入的变量不 ...

  4. java缓存技术（转）

    最近在做java缓存,了解了一下.以下仅是对map对方式讨论.没有对点阵图阵讨论.作缓存要做以下2点: 1:清理及更新缓存时机的处理:   . 虚拟机内存不足,清理缓存   .. 缓存时间超时,或访问 ...

  5. JavaScript的类型、值和变量的总结

    前言:JavaScript的数据类型分为两类:原始类型和对象类型.5种原始类型:数字.字符串.布尔值.null(空).undefined(未定义).对象是属性的集合,每个属性都由“名/值对”(值可以是 ...

  6. express: command not found.

    npm install -g express 可是不行.全局模式不行. With the release of Express 4.0.0 it looks like you need to do s ...

  7. ACM核武器

    工欲善其事必先利其器,给大家介绍一下ACM里面经常使用的一些工具,平台,作为第一发福利. 详细看这里,我直接粘贴过来有些代码没贴过来  http://wuyiqi.net/house/acm_weap ...

  8. 面向对象三大特征之多态——Java笔记（七）

    多态:     同一个实体同时具有多种形式     编译时的类型有声明该变量时使用的类型决定,运行时的类型有实际赋值给变量的对象决定     如果编译时类型和运行时类型不同,就出现多态 例: clas ...

  9. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(14)-主框架搭建

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(14)-主框架搭建    ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2 ...

  10. 深入探讨 Java 类加载器[转]

    原文地址:http://www.ibm.com/developerworks/cn/java/j-lo-classloader/index.html 类加载器(class loader)是 Java™ ...