让编辑器支持word的复制黏贴,支持截屏的黏贴
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了让编辑器支持word的复制黏贴,支持截屏的黏贴相关的知识，希望对你有一定的参考价值。
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
天道酬勤
以上是关于让编辑器支持word的复制黏贴,支持截屏的黏贴的主要内容，如果未能解决你的问题，请参考以下文章