让编辑器支持word的复制黏贴,支持截屏的黏贴_html/css

让编辑器支持word的复制黏贴,支持截屏的黏贴_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:29:55

Original

1423 people have browsed it

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+" / alt="让编辑器支持word的复制黏贴,支持截屏的黏贴_html/css_WEB-ITnose" >" );                });                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>

Copy after login

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

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

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

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