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

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. SVG图像技术摘要

    该公司今天没有,研究了最近流行SVG技术,发现,随着css3不断流行,和浏览器技术的发展,SVG网站将取代大量的图片,成为主流站点图片展示. AI是我们经常使用的矢量图编辑器,如今AI能够直接另存SV ...

  2. fastboot完成自己主动命令

    于Ubuntu13.10后来Ubuntu 14.04上,由APT安装fastboot以及adb该工具后, 发现fastboot在主动补充一个问题,, fastboot flash 自己主动有问题完成后 ...

  3. Hadoop获得先进的步步高（四）-试Hadoop

    四.试Hadoop 一个简单的求每年温度最大值的程序. 1.准备两个文本測试数据 准备两个名为data1.txt及data2.txt的文件.用于做为计算的输入数据,将其放于/home/fenglibi ...

  4. （大数据工程师学习路径）第三步 Git Community Book----中级技能（下）

    一.追踪分支 1.追踪分支 在Git中‘追踪分支’是用于联系本地分支和远程分支的. 如果你在’追踪分支'(Tracking Branches)上执行推送(push)或拉取(pull)时,它会自动推送( ...

  5. char与byte差异

    很多人刚开始学习(包含I,我已经学会了一年多java该)肯会char和byte怀疑这两个数据类型,相互混淆.今天,大量的信息专门搜索,至byte和char两个数据类型进行了总结和比较.第一批成果与大家 ...

  6. HTML5游戏开发引擎Pixi.js完全入门手册（二）元素对象属性解析

    下面,我们来解释下PIXI里面对象的各个属性.. 首先我们来看看这个各个元素对象里面到底长啥样.. alpha Number 整个舞台对象的透明度. buttonMode Boolean 渲染是否作为 ...

  7. 经Apache将tomcat转用80port这两个域名

    一般用tomcat通告Java web项目采用www.xxx.com:8080/appname/xxxservlet要访问一个简单的服务,这会'暴漏'应用程序名称(当然,你也可以摆脱),它看起来并不规 ...

  8. 《STL源代码分析》---stl_list.h读书笔记

    STL在列表list它是一种经常使用的容器.list不连续双向链表在内存,而且是环形. 理解列表如何操作的详细信息,然后.阅读STL名单上的代码是最好的方法. G++ 2.91.57.cygnus\c ...

  9. Redis实现高并发分布式序列号

    使用Redis实现高并发分布式序列号生成服务 序列号的构成 为建立良好的数据治理方案,作数据掌握.分析.统计.商业智能等用途,业务数据的编码制定通常都会遵循一定的规则,一般来讲,都会有自己的编码规则和 ...

  10. View Component

    View Component 在之前的MVC中,我们经常需要类似一种小部件的功能,通常我们都是使用Partial View来实现,因为MVC中没有类似Web Forms中的WebControl的功能. ...