chrome有很多人性化的API，比如拖拽， 比如图片可以转化为base64等；

　　 比如知乎上面的回复中可以直接黏贴图片，  就不需要手动点击图片上传按钮， 选择图片， 确认上传等等； 知乎参考地址：打开

　　让编辑器支持word的复制黏贴， 其中图片会转化为base64编码， 如果是通过远程打开这个静态页， 黏贴word文档的时候， 图片不会黏贴进来， 因为远程地址无法访问本地磁盘的绝对路径， 如果把下面代码保存成静态界面打开， 那么word中的图片都可以看见， 而且都会被转化为base64编码；

　　 编辑器支持截屏的黏贴；

　　 让编辑器支持图片直接拖拽， 直接拖拽即可添加图片， 功能更加强大， 而且图片也是base64编码；

　　使用的话这new Edit()， 参数为一个可编辑的元素， 比如有contenteditable属性的div或者iframe元素等:

<html>

    <head></head>

    <body>

    <script src="http://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>

        <div id="edit" contenteditable="true" style="width:400px;height:400px;border:1px solid #f00">

        </div>

    <script>

        function Edit( editEl ) {

            editEl = $(editEl);

            $(editEl).bind("paste", clipFn);

            function clipFn(ev) {

                //把剪贴板中的img通过canvas中专为base64字符串;

                var canvas = document.createElement("canvas");

                var context = canvas.getContext("2d");

                //从word拷贝时候会得到text/html数据;

                var html = $(ev.originalEvent.clipboardData.getData("text/html"));

                html.find("img").each(function () {

                    var img = document.createElement("img");

                    var src = $(this).attr("src"); //.replace(/\\/gi,"\/");

                    var _this = this;

                    img.src = src;

                    img.onload = function () {

                        canvas.width = img.width;

                        canvas.height = img.height;

                        context.drawImage(img, 0, 0, img.width, img.height);

                        var dataBase64 = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

                        $("img").each(function (index, el) {

                            //匹配图片;

                            if ($(this).attr("src").replace(/[\/\\]/g,"") ===  src.replace(/[\/\\]/g,"")) {

                                el.src = dataBase64;

                            };

                        });

                        img.onerror = function() {

                            console.log("图片加载失败");

                        };

                        img.onload = null;

                    };

                });

                //如果通过截图或者复制图片的方式会得到  type为"imgage"的图片;

                var ele = ev.originalEvent.clipboardData.items;

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

                    if ( ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1 ) {

                        var blob = ele[i].getAsFile();

                        readBlobAsDataURL(blob, function( base64 ) {

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

                            img.setAttribute('src', base64);

                            editEl.append(img);;

                        });

                        //阻止默认事件, 避免重复添加;

                        ev.originalEvent.preventDefault();

                    };

                };

            };

            //绑定拖拽事件

            //要给个响应

            editEl.bind("dragover", function() {

                return false;

            });

            //触发事件的响应

            editEl.bind("drop", function(ev) {

                loadImage( ev.originalEvent.dataTransfer.files[0] , function( result ) {

                    editEl.append( "<img src="+result+" />" );

                });

                return false;

            });

            // 加载 图像文件(url路径)

            function loadImage(src, callback){

                // 过滤掉 非 image 类型的文件

                if(!src.type.match(/image.*/)){

                    if(window.console){

                        console.log("选择的文件类型不是图片: ", src.type);

                    } else {

                        window.confirm("只能选择图片文件");

                    }

                    return;

                }

                // 创建 FileReader 对象 并调用 render 函数来完成渲染.

                var reader = new FileReader();

                // 绑定load事件自动回调函数

                reader.onload = function(e){

                    // 调用前面的 render 函数

                    callback(e.target.result);

                };

                // 读取文件内容

                reader.readAsDataURL(src);

            };

            function readBlobAsDataURL(blob, callback) {

                var a = new FileReader();

                a.onload = function(e) {callback(e.target.result);};

                a.readAsDataURL(blob);

            };

        };

    </script>

    <script>

        new Edit("#edit");

    </script>

    </body>

</html>

　　很多网上的编辑器里 对图片的支持单一， 都会考虑IE6， IE7，  ff， chrome， 各种兼容问题；

　　 这个解决方案适合基于chrome内核的浏览器, FF的兼容没有处理， 因为所有的图片数据都是基于base64， 图片就没有上传这一说法了，图片都变成了字符串， 不过这个有个劣势就是每一次提交的数据都会比较大；

DataURL与File,Blob,canvas对象之间的互相转换的Javascript

通过Canvas及File API缩放并上传图片

作者： NONO
出处：http://www.cnblogs.com/diligenceday/

QQ：287101329

让编辑器支持word的复制黏贴,支持截屏的黏贴的更多相关文章

  1. 使用tinymce编辑器从word保持原格式复制粘贴的办法

    官网地址http://ueditor.baidu.com Git 地址 https://github.com/fex-team/ueditor 参考博客地址 http://blog.ncmem.com ...

  2. 同时绑定onpropertychange 和 oninput 事件，实时检测 input、textarea输入改变事件，支持低版本IE，支持复制粘贴

    实时检测 input.textarea输入改变事件,支持低版本IE,支持复制粘贴 检测input.textarea输入改变事件有以下几种: 1.onkeyup/onkeydown 捕获用户键盘输入事件 ...

  3. ASP.NET Core2集成Office Online Server（OWAS）实现办公文档的在线预览与编辑（支持word\excel\ppt\pdf等格式）

    Office Online Server是微软开发的一套基于Office实现在线文档预览编辑的技术框架(支持当前主流的浏览器,且浏览器上无需安装任何插件,支持word.excel.ppt.pdf等文档 ...

  4. [转发]ASP.NET Core2集成Office Online Server（OWAS）实现办公文档的在线预览与编辑（支持word\excel\ppt\pdf等格式）

    转载自:https://www.cnblogs.com/Andre/p/9549874.html Office Online Server是微软开发的一套基于Office实现在线文档预览编辑的技术框架 ...

  5. 富文本编辑器直接从 word 中复制粘贴公式

    在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...

  6. 如何从word中复制内容到网站后台编辑器中

    word图片转存,是指UEditor为了解决用户从word中复制了一篇图文混排的文章粘贴到编辑器之后,word文章中的图片数据无法显示在编辑器中,也无法提交到服务器上的问题而开发的一个操作简便的图片转 ...

  7. 百度UEditor编辑器从word粘贴公式

    官网地址http://ueditor.baidu.com Git 地址 https://github.com/fex-team/ueditor 参考博客地址 http://blog.ncmem.com ...

  8. 百度UE编辑器从word粘贴公式

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统.没有办 ...

  9. ue/um-editor实现word图片复制

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统.没有办 ...

随机推荐

  1. AC日记——单词替换 1.7 21

    21:单词替换 总时间限制:  1000ms 内存限制:  65536kB 描述 输入一个字符串,以回车结束(字符串长度<=100).该字符串由若干个单词组成,单词之间用一个空格隔开,所有单词区 ...

  2. VS 的编译选项 build下的 platform target -- Any CPU和x86有什么影响？

    VS 的编译选项 build下的platform -- Any CPU和x86有什么影响? 现在的问题是,我的一个assembly用Any CPU编译就不能在64位系统下运行了,但是用x86编译就ok ...

  3. noj[1581] 筷子

    题目描述 A先生有很多双筷子.确切的说应该是很多根,因为筷子的长度不一,很难判断出哪两根是一双的.这天,A先生家里来了K个客人,A先生留下他们吃晚饭.加上A先生,A夫人和他们的孩子小A,共K+3个人. ...

  4. luogu10125回文数[noip1999 Day1 T1]

    题目描述 若一个数(首位不为零)从左向右读与从右向左读都一样,我们就将其称之为回文数. 例如:给定一个10进制数56,将56加65(即把56从右向左读),得到121是一个回文数. 又如:对于10进制数 ...

  5. IIS7.5上的REST服务的Put操作发生HTTP Error 405.0 - Method Not Allowed 解决方法

    WebDAV 是超文本传输协议 (HTTP) 的一组扩展,为 Internet 上计算机之间的编辑和文件管理提供了标准.利用这个协议用户可以通过Web进行远程的基本文件操作,如拷贝.移动.删除等.在I ...

  6. sg函数与博弈论2

    参考链接: http://blog.sina.com.cn/s/blog_51cea4040100h3l9.html 这篇主要就是讲anti-sg.multi-sg和every-sg的. 例1 poj ...

  7. Java 集合系列01之 总体框架

      Java集合是java提供的工具包,包含了常用的数据结构:集合.链表.队列.栈.数组.映射等.Java集合工具包位置是java.util.*Java集合主要可以划分为4个部分:List列表.Set ...

  8. Web服务器父与子 Apache和Tomcat区别

    http://developer.51cto.com/art/201007/210894.htm 熟悉三国的朋友都知道曹操,曹操有二十五个儿子,其中最得曹操宠爱的是曹丕.曹植.曹彰三个,曹丕性格阴冷, ...

  9. Orchard CRM 更新 - 同时支持 Microsoft Dynamics CRM 2011, 2013, 2015, 2016!

    本版本支持: 使用Orchard 1.8.1 系统 Dynamics CRM 2015 DLL .Net Framework 4.5.2 演示版本: http://www.orchardcrm.com ...

  10. linux传输大文件

    http://dreamway.blog.51cto.com/1281816/1151886 linux传输大文件