paste image on chrome

app/controllers/FileController.go

@@ -20,7 +20,7 @@ func (c File) UploadImage(renderHtml string) revel.Result {
 		renderHtml = "file/image.html"
 	}
 	
-	re := c.uploadImage();
+	re := c.uploadImage("");
 	
 	c.RenderArgs["fileUrlPath"] = siteUrl + re.Id
 	c.RenderArgs["resultCode"] = re.Code
@@ -34,24 +34,26 @@ func (c File) UploadBlogLogo() revel.Result {
 	return c.UploadImage("file/blog_logo.html");
 }
 
-// 拖拉上传
-func (c File) UploadImageJson(renderHtml string) revel.Result {
-	re := c.uploadImage();
+// 拖拉上传, pasteImage
+func (c File) UploadImageJson(renderHtml, from string) revel.Result {
+	re := c.uploadImage(from);
 	re.Id = siteUrl + re.Id
 //	re.Id = re.Id
 	return c.RenderJson(re)
 }
 
 // 上传图片, 公用方法
-func (c File) uploadImage() (re info.Re) {
+func (c File) uploadImage(from string) (re info.Re) {
 	var fileUrlPath = ""
 	var resultCode = 0 // 1表示正常
 	var resultMsg = "内部错误" // 错误信息
+	var Ok = false
 	
 	defer func() {
 		re.Id = fileUrlPath
 		re.Code = resultCode
 		re.Msg = resultMsg
+		re.Ok = Ok
 	}()
 	
 	file, handel, err := c.Request.FormFile("file")
@@ -69,11 +71,18 @@ func (c File) uploadImage() (re info.Re) {
 	}
 	// 生成新的文件名
 	filename := handel.Filename
-	_, ext := SplitFilename(filename)
+	
+	var ext string;
+	if from == "pasteImage" {
+		ext = ".png"; // TODO 可能不是png类型
+	} else {
+		_, ext = SplitFilename(filename)
 		if(ext != ".gif" && ext != ".jpg" && ext != ".png" && ext != ".bmp" && ext != ".jpeg") {
 			resultMsg = "不是图片"
 			return re
 		}
+	}
+
 	filename = NewGuid() + ext
 	data, err := ioutil.ReadAll(file)
 	if err != nil {
@@ -99,6 +108,7 @@ func (c File) uploadImage() (re info.Re) {
 	
 	fileUrlPath += "/" + GetFilename(toPathGif)
 	resultCode = 1
+	Ok = true
 	resultMsg = "上传成功!"
 	
 	return re

app/views/Note/note-dev.html

@@ -928,7 +928,7 @@ LEA.locale = "{{.locale}}";
 <script src="/js/jQuery-slimScroll-1.3.0/jquery.slimscroll.js"></script>
 <script src="js/app/page.js"></script>
 
-<script src="tinymce/tinymce.min.js"></script>
+<script src="tinymce/tinymce.js"></script>
 <script src="js/jquery-cookie-min.js"></script>
 <script src="js/bootstrap-min.js"></script>
 <script src="js/app/note.js"></script>

app/views/Note/note.html

@@ -928,7 +928,7 @@ LEA.locale = "{{.locale}}";
 <script src="/js/jQuery-slimScroll-1.3.0/jquery.slimscroll.js"></script>
 <script src="js/app/page-min.js"></script>
 
-<script src="tinymce/tinymce.min.js"></script>
+<script src="tinymce/tinymce.js"></script>
 <script src="js/jquery-cookie-min.js"></script>
 <script src="js/bootstrap-min.js"></script>
 <script src="js/app/note-min.js"></script>

public/js/common.js

@@ -1,4 +1,9 @@
-// --------------------- 命名空间
+// leanote 通用方法
+
+//--------------
+// 命名空间
+//--------------
+
 // 最上级变量
 var LEA = {};
 // 命名空间
@@ -419,32 +424,6 @@ function enableEditor() {
 	}
 }
 
-//---------------
-// notify
-$(function() {
-	if($.pnotify) {
-		$.pnotify.defaults.delay = 1000;
-	}
-})
-
-function notifyInfo(text) {
-	$.pnotify({
-	    title: '通知',
-	    text: text,
-	    type: 'info',
-	    styling: 'bootstrap'
-	});
-}
-function notifyError(text) {
-	$.pnotify.defaults.delay = 2000
-	$.pnotify({
-	    title: '通知',
-	    text: text,
-	    type: 'error',
-	    styling: 'bootstrap'
-	});
-}
-
 //-----------
 // dialog
 //-----------
@@ -500,6 +479,7 @@ function hideDialogRemote() {
 }
 //---------------
 // notify
+// 没用
 $(function() {
 	if($.pnotify) {
 		$.pnotify.defaults.delay = 1000;
@@ -808,7 +788,7 @@ function reIsOk(re) {
 }
 
 // marker
-// 下拉扩展工具栏用, 点击文档导航用
+// 下拉扩展工具栏用, 点击文档导航用, 切换编辑模式时用
 LEA.bookmark = null;
 LEA.hasBookmark = false;
 function saveBookmark() {

public/tinymce/plugins/paste/classes/Clipboard.js

@@ -239,6 +239,93 @@ define("tinymce/pasteplugin/Clipboard", [
 			}
 		});
 		
+		// 当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);
 			var isKeyBoardPaste = new Date().getTime() - keyboardPasteTimeStamp < 100;
@@ -293,6 +380,12 @@ define("tinymce/pasteplugin/Clipboard", [
 			}, 0);
 		});
 		
+		//-----------
+		// paste image
+		try {
+			pasteImage(e);
+		} catch(e) {};
+
 		self.pasteHtml = pasteHtml;
 		self.pasteText = pasteText;
 	};

public/tinymce/plugins/paste/plugin.dev.js

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

public/tinymce/plugins/paste/plugin.js

@@ -424,6 +424,93 @@ define("tinymce/pasteplugin/Clipboard", [
 			}
 		});
 		
+		// 当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);
 			var isKeyBoardPaste = new Date().getTime() - keyboardPasteTimeStamp < 100;
@@ -478,6 +565,12 @@ define("tinymce/pasteplugin/Clipboard", [
 			}, 0);
 		});
 		
+		//-----------
+		// paste image
+		try {
+			pasteImage(e);
+		} catch(e) {};
+
 		self.pasteHtml = pasteHtml;
 		self.pasteText = pasteText;
 	};