chrome支持剪贴板事件，因此，利用这个事件，完成剪贴板图片直接粘贴，并自动上传服务器功能。
另外就是对于最新版firefox，可以直接粘贴，不用任何处理。原理是按照base64编码，直接将图片数据存入img标签的src中。
是方便了编辑，但是在其他不支持base64为src的浏览器，比如低版本IE，就无法展示图片了。
所以为了兼容性，还是将图片上传到web服务器的好。
网上能支持图文混排的word文档粘贴的，都需要安装activeX控件，而且收费还比较贵。
在时间、金钱、需求之间取个平衡了～
下面是修改步骤：
admin/editor/kindeditor.js 末尾加上：
$(document).ready(function(){
var KE =editorMap['content'];
if(KE){
if(KE.isEmpty()){
KE.insertHtml('Chrome下可直接粘贴图片,并自动上传服务器,欢迎体验~');
}
KE.edit.doc.onpaste = function(event){
// console.log('content bind onpaste.');
// use event.originalEvent.clipboard for newer chrome versions
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
console.log(JSON.stringify(items)); // will give you the mime types
// find pasted image among pasted items
var blob;
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") === 0) {
blob = items[i].getAsFile();
}
}
// load image if there is a pasted image
// console.log(blob);
if (blob !== null && blob != undefined) {
// submitFileForm(blob, 'paste');
submitFileFormToUpyun(blob, 'paste');
}
}
}
});
function submitFileFormToUpyun(file_blob, type) {
var extension = file_blob.type.match(/\/([a-z0-9]+)/i)[1].toLowerCase();
// console.log('filetype:'+file_blob.type);
var formData = new FormData();
formData.append('file', file_blob, "paste."+extension);
formData.append('extension', extension );
formData.append("mimetype", file_blob.type );
formData.append('submission-type', type);
var xhr = new XMLHttpRequest();
// xhr.responseType = "blob";//返回的是普通数据,不是图片,因此不需要以二进制显示
xhr.open('POST', '/paste_upload/upyun_do.php');
xhr.onload = function () {
if (xhr.status == 200) {
try
{
var obj = jQuery.parseJSON( xhr.responseText);
if(obj && parseInt(obj.error) == 0){
console.log(obj);
var url = obj.url;
if(url.toString().indexOf("/paste_img/")>=0){
// document.getElementById("pastedImage").src = url;
//addattach_img(fileurl,imgsrc,aid, width, height, alt)
addattach_img(url, url,8, obj.width, obj.height, obj.filename);
}
} //end obj
}
catch(err)
{
alert('paste return error!');
}
}//end xhr status
};
xhr.send(formData);
}
服务器响应php：
/paste_upload/upyun_do.php
这里就不写全部的代码了。步骤就是：
1.先利用自带的uploadFile，完成上传到emlog默认目录。
2.然后再调用又拍云的upyun.class.php sdk，进行上传动作。
优缺点：
和又拍云form提交方式相比，本方案的缺点是，如果能在博客服务器和又拍云服务器之间进行http明文审计，会审计到用户名和密码。
在便携性和安全性之间选择，那就只有多一个权限低点的操作员了。
文章来源：http://devzc.com/post/458
有时候为了增加文本、文档编写的效率，需要快速上传图片。前一阵子在sf上看到@公子写了一个在线聊天的功能，里面的输入框中有屏幕截图后、粘贴即上传的功能，觉得很赞，就去问了公子怎么实现的。
得到答案后，修改一部分代码就用在了计划表写自省的地方，代码如下：
/** 粘贴上传图片 **/
document.getElementsByTagName("textarea")[0].addEventListener('paste', function(e) {
var clipboard = e.clipboardData;
for(var i=0,len=clipboard.items.length; i<len; i++) {
if(clipboard.items[i].kind == 'file' || clipboard.items[i].type.indexOf('image') > -1) {
var imageFile = clipboard.items[i].getAsFile();
var form = new FormData;
form.append('t', 'ajax-uploadpic');
form.append('avatar', imageFile);
var callback = G.uploadpicCallback || function(type, data){};
$.ajax({
url: G.ROOT_URL+'sys/ajax',
type: "POST",
data: form,
processData: false,
contentType: false,
beforeSend: function() {
callback('before');
},
error: function() {
callback('error');
},
success: function(url) {
callback('success', url);
}
})
e.preventDefault();
}
}
});
其中只对textarea标签绑定粘贴事件，还调用了一个全局函数G.uploadpicCallback，使用上是这样的：
G = {};
G.uploadpicCallback = function(type, src){
type = type || 'before';
var $the = $('#content');
switch(type){
// 开始上传
case 'before':
$the.attr('disabled', 'disabled');
break;
// 服务器返回错误
case 'error':
$the.attr('disabled', false);
alert('图片上传失败');
break;
// 上传成功
case 'success':
$the.attr('disabled', false);
$the.val($the.val()+'<img src="'+src+'" width="100%">');
break;
}
}
@公子在github的源代码链接如下：https://github.com/lizheming/chatonline/blob/master/main.js#L405-L436 （很认真，甚至帮你把多少行到多少行的代码都写在链接后面了）。
另外，在知乎上也搜索到了相应的答案：《知乎回答问题编辑框用 Ctrl+V 粘贴图片是如何实现的？》，也可以参考一下。