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

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，图片就没有上传这一说法了，图片都变成了字符串，不过这个有个劣势就是每一次提交的数据都会比较大；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。