ctrl+v 复制图片, 有时不显示, 但上传了

https://github.com/leanote/leanote/issues/227

public/js/plugins/attachment_upload.js

@@ -72,7 +72,7 @@ define('attachment_upload', ['jquery.ui.widget', 'fileupload'], function(){
 	        		return;
 	        	}
 
-	            var tpl = $('<div class="alert alert-info"><img class="loader" src="/tinymce/plugins/leaui_image/public/images/ajax-loader.gif"> <a class="close" data-dismiss="alert">×</a></div>');
+	            var tpl = $('<div class="alert alert-info"><img class="loader" src="/images/ajax-loader.gif"> <a class="close" data-dismiss="alert">×</a></div>');
 	
 	            // Append the file name and file size
 	            tpl.append(data.files[0].name + ' <small>[<i>' + formatFileSize(data.files[0].size) + '</i>]</small>');

public/js/plugins/editor_drop_paste.js

@@ -1,7 +1,19 @@
 // for editor.
 // drag image to editor
 var urlPrefix = UrlPrefix; // window.location.protocol + "//" + window.location.host;
-define('editor_drop_paste', ['jquery.ui.widget', 'fileupload'], function(){
+define('editor_drop_paste', ['jquery.ui.widget', 'fileupload'], function() {
+
+	// 在toggle成pre或ace时
+	// 最后没有元素, 或者元素不是p, 则在最后插入之
+	function insertPIfNotExists() {
+		var children = $('#editorContent').children();
+		var lastChild = children && children.length > 0 ? children[children.length - 1] : null;
+		if (!lastChild || lastChild.tagName != 'P') {
+			$('#editorContent').append('<p><br data-mce-bogus="1"></p>');
+		}
+	}
+
+	// 粘贴图片的进度控制
 	function Process(editor) {
 		var id = '__mcenew' + (new Date()).getTime();
 		var str = '<div contenteditable="false" id="' + id + '" class="leanote-image-container">' + 
@@ -13,7 +25,10 @@ define('editor_drop_paste', ['jquery.ui.widget', 'fileupload'], function(){
 				'</div>' + 
 			'</div>';
 		this.containerStr = str;
+		
 		editor.insertContent(str);
+		insertPIfNotExists();
+		
 		var container = $('#' + id);
 		this.container = container;
 		this.id = id;
@@ -111,7 +126,7 @@ define('editor_drop_paste', ['jquery.ui.widget', 'fileupload'], function(){
 					ajaxPost("/file/copyImage", {userId: UserInfo.UserId, fileId: fileId, toUserId: curNote.UserId}, function(re) {
 						if(reIsOk(re) && re.Id) {
 							var urlPrefix = window.location.protocol + "//" + window.location.host;
-							data.src = urlPrefix + "/file/outputImage?fileId=" + re.Id;
+							data.src = urlPrefix + "/api/file/getImage?fileId=" + re.Id;
 						}
 						renderImage(data);
 					});
@@ -147,7 +162,7 @@ define('editor_drop_paste', ['jquery.ui.widget', 'fileupload'], function(){
 	        // This function is called when a file is added to the queue;
 	        // either via the browse button, or via drag/drop:
 	        add: function(e, data) {
-	            var tpl = $('<li><div class="alert alert-info"><img class="loader" src="/public/album/images/ajax-loader.gif"> <a class="close" data-dismiss="alert">×</a></div></li>');
+	            var tpl = $('<li><div class="alert alert-info"><img class="loader" src="/images/ajax-loader.gif"> <a class="close" data-dismiss="alert">×</a></div></li>');
 	
 	            // Append the file name and file size
 	            tpl.find('div').append(data.files[0].name + ' <small>[<i>' + formatFileSize(data.files[0].size) + '</i>]</small>');
@@ -165,7 +180,7 @@ define('editor_drop_paste', ['jquery.ui.widget', 'fileupload'], function(){
 	            if (data.result.Ok == true) {
 	                data.context.remove();
 	                // life
-	                var data2 = {src: urlPrefix + "/file/outputImage?fileId=" + data.result.Id}
+	                var data2 = {src: urlPrefix + "/api/file/getImage?fileId=" + data.result.Id}
 	                insertImage(data2);
 	            } else {
 	                data.context.empty();
@@ -355,7 +370,7 @@ define('editor_drop_paste', ['jquery.ui.widget', 'fileupload'], function(){
 			    		}
 			    		// 这里, 如果图片宽度过大, 这里设置成500px
 						var urlPrefix = UrlPrefix; // window.location.protocol + "//" + window.location.host;
-						var src = urlPrefix + "/file/outputImage?fileId=" + re.Id;
+						var src = urlPrefix + "/api/file/getImage?fileId=" + re.Id;
 						getImageSize(src, function(wh) {
 							// life 4/25
 							if(wh && wh.width) {
@@ -379,7 +394,7 @@ define('editor_drop_paste', ['jquery.ui.widget', 'fileupload'], function(){
 		    		// 这里, 如果图片宽度过大, 这里设置成500px
 		    		var re = data.result;
 					var urlPrefix = UrlPrefix; // window.location.protocol + "//" + window.location.host;
-					var src = urlPrefix + "/file/outputImage?fileId=" + re.Id;
+					var src = urlPrefix + "/api/file/getImage?fileId=" + re.Id;
 
 					if(curNote && !curNote.IsMarkdown) {
 						data.process.replace(src);

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

@@ -341,7 +341,31 @@ define("tinymce/pasteplugin/Clipboard", [
 			document.body.appendChild(img);
 		}
 		
+		// 是否有图片的粘贴, 有则删除paste bin
+		// 因为paste bin隐藏不见了, 如果不删除, 则editor_drop_paste的图片就会在这个bin下
+		// 而且, paste bin最后会删除, 导致图片不能显示
+		function hasImage(event) {
+			var items;
+			if (event.clipboardData) {
+				items = event.clipboardData.items;
+			}
+			else if(event.originalEvent && event.originalEvent.clipboardData) {
+				items = event.originalEvent.clipboardData;
+			}
+			if (!items) {
+				return false;
+			}
+			// find pasted image among pasted items
+			for (var i = 0; i < items.length; i++) {
+				if (items[i].type.indexOf("image") === 0) {
+					return true;
+			    }
+			}
+			return false;
+		}
+		
 		// 上传图片
+		// 已过时, 不用, pasteImage在editor_drop_paste.js中用
 		function pasteImage(event) {
 			// use event.originalEvent.clipboard for newer chrome versions
 			  var items = (event.clipboardData  || event.originalEvent.clipboardData).items; // 可能有多个file, 找到属于图片的file
@@ -406,6 +430,12 @@ define("tinymce/pasteplugin/Clipboard", [
 
 		editor.on('paste', function(e) {
 			if(inAcePrevent()) {
+				removePasteBin();
+				return;
+			}
+			
+			if (hasImage(e)) {
+				removePasteBin();
 				return;
 			}
 
@@ -459,21 +489,8 @@ define("tinymce/pasteplugin/Clipboard", [
 					pasteHtml(html, clipboardContent['text/plain']);
 				}
 			}, 0);
-			
-			//-----------
-			// paste image
-			try {
-				/*
-				if(pasteImage(e)) {
-					return;
-				}
-				*/
-			} catch(e) {};
-
 		});
 
-		
-
 		self.pasteHtml = pasteHtml;
 		self.pasteText = pasteText;
 	};

public/tinymce/plugins/paste/plugin.js

@@ -526,7 +526,31 @@ define("tinymce/pasteplugin/Clipboard", [
 			document.body.appendChild(img);
 		}
 		
+		// 是否有图片的粘贴, 有则删除paste bin
+		// 因为paste bin隐藏不见了, 如果不删除, 则editor_drop_paste的图片就会在这个bin下
+		// 而且, paste bin最后会删除, 导致图片不能显示
+		function hasImage(event) {
+			var items;
+			if (event.clipboardData) {
+				items = event.clipboardData.items;
+			}
+			else if(event.originalEvent && event.originalEvent.clipboardData) {
+				items = event.originalEvent.clipboardData;
+			}
+			if (!items) {
+				return false;
+			}
+			// find pasted image among pasted items
+			for (var i = 0; i < items.length; i++) {
+				if (items[i].type.indexOf("image") === 0) {
+					return true;
+			    }
+			}
+			return false;
+		}
+		
 		// 上传图片
+		// 已过时, 不用, pasteImage在editor_drop_paste.js中用
 		function pasteImage(event) {
 			// use event.originalEvent.clipboard for newer chrome versions
 			  var items = (event.clipboardData  || event.originalEvent.clipboardData).items; // 可能有多个file, 找到属于图片的file
@@ -591,6 +615,12 @@ define("tinymce/pasteplugin/Clipboard", [
 
 		editor.on('paste', function(e) {
 			if(inAcePrevent()) {
+				removePasteBin();
+				return;
+			}
+			
+			if (hasImage(e)) {
+				removePasteBin();
 				return;
 			}
 
@@ -644,21 +674,8 @@ define("tinymce/pasteplugin/Clipboard", [
 					pasteHtml(html, clipboardContent['text/plain']);
 				}
 			}, 0);
-			
-			//-----------
-			// paste image
-			try {
-				/*
-				if(pasteImage(e)) {
-					return;
-				}
-				*/
-			} catch(e) {};
-
 		});
 
-		
-
 		self.pasteHtml = pasteHtml;
 		self.pasteText = pasteText;
 	};