paste image on chrome

This commit is contained in:
life
2014-06-08 17:57:19 +08:00
parent 8af64c7b74
commit c55f364153
10 changed files with 220 additions and 44 deletions

View File

@ -238,6 +238,93 @@ define("tinymce/pasteplugin/Clipboard", [
createPasteBin();
}
});
// 当url改变时, 得到图片的大小 copy from leanote_image
function getImageSize(url, callback) {
var img = document.createElement('img');
function done(width, height) {
img.parentNode.removeChild(img);
callback({width: width, height: height});
}
img.onload = function() {
done(img.clientWidth, img.clientHeight);
};
img.onerror = function() {
done();
};
img.src = url;
var style = img.style;
style.visibility = 'hidden';
style.position = 'fixed';
style.bottom = style.left = 0;
style.width = style.height = 'auto';
document.body.appendChild(img);
}
// 上传图片
function pasteImage(event) {
// use event.originalEvent.clipboard for newer chrome versions
var items = (event.clipboardData || event.originalEvent.clipboardData).items; // 可能有多个file, 找到属于图片的file
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
if (blob) {
log(blob);
var reader = new FileReader();
reader.onload = function(event) {
// 上传之
var c = new FormData;
c.append("from", "pasteImage");
c.append("file", blob);
// var d;
// d = $.ajaxSettings.xhr();
// d.withCredentials = i;var d = {};
// 先显示loading...
var editor = tinymce.EditorManager.activeEditor;
var dom = editor.dom;
var d = {};
d.id = '__mcenew';
d.src = "http://leanote.com/images/loading-24.gif";
editor.insertContent(dom.createHTML('img', d));
var imgElm = dom.get('__mcenew');
$.ajax({url: "/file/uploadImageJson", contentType:false, processData:false , data: c, type: "POST"}
).done(function(re) {
if(!re || typeof re != "object" || !re.Ok) {
// 删除
dom.remove(imgElm);
return;
}
// 这里, 如果图片宽度过大, 这里设置成500px
getImageSize(re.Id, function(wh) {
// life 4/25
if(wh && wh.width) {
if(wh.width > 600) {
wh.width = 600;
}
d.width = wh.width;
dom.setAttrib(imgElm, 'width', d.width);
}
dom.setAttrib(imgElm, 'src', re.Id);
});
dom.setAttrib(imgElm, 'id', null);
});
};
reader.readAsDataURL(blob);
}
}
editor.on('paste', function(e) {
var clipboardContent = getClipboardContent(e);
@ -292,6 +379,12 @@ define("tinymce/pasteplugin/Clipboard", [
}
}, 0);
});
//-----------
// paste image
try {
pasteImage(e);
} catch(e) {};
self.pasteHtml = pasteHtml;
self.pasteText = pasteText;

View File

@ -117,4 +117,4 @@
writeScripts();
})(this);
// $hash: 7d2f54c70d38a608b043c257f108506f
// $hash: 5b06d9e98fb338fd1b0ff7ee116ca480

View File

@ -423,6 +423,93 @@ define("tinymce/pasteplugin/Clipboard", [
createPasteBin();
}
});
// 当url改变时, 得到图片的大小 copy from leanote_image
function getImageSize(url, callback) {
var img = document.createElement('img');
function done(width, height) {
img.parentNode.removeChild(img);
callback({width: width, height: height});
}
img.onload = function() {
done(img.clientWidth, img.clientHeight);
};
img.onerror = function() {
done();
};
img.src = url;
var style = img.style;
style.visibility = 'hidden';
style.position = 'fixed';
style.bottom = style.left = 0;
style.width = style.height = 'auto';
document.body.appendChild(img);
}
// 上传图片
function pasteImage(event) {
// use event.originalEvent.clipboard for newer chrome versions
var items = (event.clipboardData || event.originalEvent.clipboardData).items; // 可能有多个file, 找到属于图片的file
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
if (blob) {
log(blob);
var reader = new FileReader();
reader.onload = function(event) {
// 上传之
var c = new FormData;
c.append("from", "pasteImage");
c.append("file", blob);
// var d;
// d = $.ajaxSettings.xhr();
// d.withCredentials = i;var d = {};
// 先显示loading...
var editor = tinymce.EditorManager.activeEditor;
var dom = editor.dom;
var d = {};
d.id = '__mcenew';
d.src = "http://leanote.com/images/loading-24.gif";
editor.insertContent(dom.createHTML('img', d));
var imgElm = dom.get('__mcenew');
$.ajax({url: "/file/uploadImageJson", contentType:false, processData:false , data: c, type: "POST"}
).done(function(re) {
if(!re || typeof re != "object" || !re.Ok) {
// 删除
dom.remove(imgElm);
return;
}
// 这里, 如果图片宽度过大, 这里设置成500px
getImageSize(re.Id, function(wh) {
// life 4/25
if(wh && wh.width) {
if(wh.width > 600) {
wh.width = 600;
}
d.width = wh.width;
dom.setAttrib(imgElm, 'width', d.width);
}
dom.setAttrib(imgElm, 'src', re.Id);
});
dom.setAttrib(imgElm, 'id', null);
});
};
reader.readAsDataURL(blob);
}
}
editor.on('paste', function(e) {
var clipboardContent = getClipboardContent(e);
@ -477,6 +564,12 @@ define("tinymce/pasteplugin/Clipboard", [
}
}, 0);
});
//-----------
// paste image
try {
pasteImage(e);
} catch(e) {};
self.pasteHtml = pasteHtml;
self.pasteText = pasteText;

File diff suppressed because one or more lines are too long