让编辑器支持word复制黏贴、截屏的js代码

2019-11-20 08:43:58

字体：大中小

来源：转载

供稿：网友

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，图片就没有上传这一说法了，图片都变成了字符串，不过这个有个劣势就是每一次提交的数据都会比较大；

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：微信小程序火车票查询实例讲解

下一篇：Node.js下自定义错误类型详解