Home >Web Front-end >HTML Tutorial >让编辑器支持word的复制黏贴,支持截屏的黏贴_html/css_WEB-ITnose
让编辑器支持word的复制黏贴,支持截屏的黏贴_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:29:551434browse
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> 很多网上的编辑器里 对图片的支持单一， 都会考虑IE6， IE7， ff， chrome， 各种兼容问题；
这个解决方案适合基于chrome内核的浏览器, FF的兼容没有处理， 因为所有的图片数据都是基于base64， 图片就没有上传这一说法了，图片都变成了字符串， 不过这个有个劣势就是每一次提交的数据都会比较大；
DataURL与File,Blob,canvas对象之间的互相转换的Javascript
通过Canvas及File API缩放并上传图片
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：中间人攻击之html注入_html/css_WEB-ITnoseNext article：CSS学习笔记--定位position属性的学习_html/css_WEB-ITnose