让编辑器支持word复制黏贴、截屏的js代码
chrome有很多人性化的API，比如拖拽，比如图片可以转化为base64等；
比如知乎上面的回复中可以直接黏贴图片， 就不需要手动点击图片上传按钮，选择图片，确认上传等等；知乎参考地址：打开
让编辑器支持word的复制黏贴，其中图片会转化为base64编码，如果是通过远程打开这个静态页，黏贴word文档的时候，图片不会黏贴进来，因为远程地址无法访问本地磁盘的绝对路径，如果把下面代码保存成静态界面打开，那么word中的图片都可以看见，而且都会被转化为base64编码；
编辑器支持截屏的黏贴；
让编辑器支持图片直接拖拽，直接拖拽即可添加图片，功能更加强大，而且图片也是base64编码；
使用的话这newEdit()，参数为一个可编辑的元素，比如有contenteditable属性的div或者iframe元素等:
<html>
<head></head>
<body>
<scriptsrc="http://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
<divid="edit"contenteditable="true"style="width:400px;height:400px;border:1pxsolid#f00">
</div>
<script>
functionEdit(editEl){
editEl=$(editEl);
$(editEl).bind("paste",clipFn);
functionclipFn(ev){
//把剪贴板中的img通过canvas中专为base64字符串;
varcanvas=document.createElement("canvas");
varcontext=canvas.getContext("2d");
//从word拷贝时候会得到text/html数据;
varhtml=$(ev.originalEvent.clipboardData.getData("text/html"));
html.find("img").each(function(){
varimg=document.createElement("img");
varsrc=$(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);
vardataBase64=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"的图片;
varele=ev.originalEvent.clipboardData.items;
for(vari=0;i<ele.length;++i){
if(ele[i].kind=='file'&&ele[i].type.indexOf('image/')!==-1){
varblob=ele[i].getAsFile();
readBlobAsDataURL(blob,function(base64){
varimg=document.createElement('img');
img.setAttribute('src',base64);
editEl.append(img);;
});
//阻止默认事件,避免重复添加;
ev.originalEvent.preventDefault();
};
};
};
//绑定拖拽事件
//要给个响应
editEl.bind("dragover",function(){
returnfalse;
});
//触发事件的响应
editEl.bind("drop",function(ev){
loadImage(ev.originalEvent.dataTransfer.files[0],function(result){
editEl.append("<imgsrc="+result+"/>");
});
returnfalse;
});
//加载图像文件(url路径)
functionloadImage(src,callback){
//过滤掉非image类型的文件
if(!src.type.match(/image.*/)){
if(window.console){
console.log("选择的文件类型不是图片:",src.type);
}else{
window.confirm("只能选择图片文件");
}
return;
}
//创建FileReader对象并调用render函数来完成渲染.
varreader=newFileReader();
//绑定load事件自动回调函数
reader.onload=function(e){
//调用前面的render函数
callback(e.target.result);
};
//读取文件内容
reader.readAsDataURL(src);
};
functionreadBlobAsDataURL(blob,callback){
vara=newFileReader();
a.onload=function(e){callback(e.target.result);};
a.readAsDataURL(blob);
};
};
</script>
<script>
newEdit("#edit");
</script>
</body>
</html>
很多网上的编辑器里对图片的支持单一，都会考虑IE6，IE7， ff，chrome，各种兼容问题；
这个解决方案适合基于chrome内核的浏览器,FF的兼容没有处理，因为所有的图片数据都是基于base64，图片就没有上传这一说法了，图片都变成了字符串，不过这个有个劣势就是每一次提交的数据都会比较大；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。