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

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. CodeForces 441 A. Valera and Antique Items

    纯粹练JAVA.... A. Valera and Antique Items time limit per test 1 second memory limit per test 256 megab ...

  2. Android 异步消息处理机制 让你在深入了解 Looper、Handler、Message之间的关系

    转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/38377229 ,本文出自[张鸿洋的博客] 非常多人面试肯定都被问到过,请问And ...

  3. 采用Visual Stuidio 2010 创建网站栏

    采用Visual Stuidio 2010 创建网站栏 Visual Stuidio 2010 该项目模板使创建网站栏/内容类型和列表变得非常方便. 1. 管理员身份打开Visual Stuidio ...

  4. JNDI数据源配置注意事项

    假设是在原有project上改动 1,applicationContext.xml中改动当中的value值 <bean id="dataSource" class=" ...

  5. iOS类别(Category)和扩展(Extension，匿名类)

    Category在iOS在开发常用. 特别是对于系统扩展上课时间.我们不能继承系统类.直接添加到系统类方法,最大程度上体现Objective-C动态语言特征. #import @interface N ...

  6. eclipse字母大写和小写转换的快捷键

    大写转换小写 ctrl+shift+y        小写转换大写 ctrl+shift+x   

  7. Oracle中的delete和truncate的关系

    转自:http://chenxy.blog.51cto.com/729966/168459 1.相同点       a.都可以删除数据,其中truncate用于全表清空数据,而delete可以选择的删 ...

  8. 【 D3.js 入门系列 --- 9.1 】 生产饼图

    我个人的博客: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处.谢谢. 这一节用 Layout 做一个饼状图.第9节中说过, Layout ...

  9. iOS开发- 拨打电话总结

    关于iOS应用拨打电话, 我所知道的有3种办法, 详细例如以下: 一.利用openURL(tel) 特点: 直接拨打, 不弹出提示. 而且, 拨打完以后, 留在通讯录中, 不返回到原来的应用. //拨 ...

  10. 【Head First Javascript】学习笔记0——自己制作chm参考手册素材

    变量声明:var 常量声明:const 数据格式转换: 1.转换函数 parseInt(A):把字符串A转换成整数:其中A为只包含数字的字符串 parseFloat(A):把字符串A转换成浮点数:其中 ...