笔记内拖动图片, 拖动上传图片

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

app/views/note/note-dev.html

@@ -571,7 +571,7 @@ function log(o) {
 						<!-- leaui image drop image to editor-->
 						<form id="upload" method="post" action="/file/uploadImageLeaui" enctype="multipart/form-data" style="margin-top: 5px;">
 			                <div id="drop">
-			                       Drop images to here
+			                       {{leaMsg . "Drop images to here"}}
 			                    <input type="file" name="file" multiple style="display: none"/>
 			                </div>
 			                <ul id="uploadMsg">

messages/msg.zh

@@ -141,6 +141,7 @@ Are you sure to delete it ?=确认删除?
 Insert link into content=将附件链接插入到内容中
 Download=下载
 Delete=删除
+Drop images to here=将图片拖动至此
 
 update=更新
 create=创建

public/js/app/note.js

@@ -1357,6 +1357,7 @@ Note.deleteNoteTag = function(item, tag) {
 
 // readonly
 Note.readOnly = false; // 默认为false要好?
+LEA.readOnly = false;
 // 切换只读模式
 Note.toggleReadOnly = function() {
 	if(LEA.em && LEA.em.isWriting()) { // 写作模式下
@@ -1390,6 +1391,9 @@ Note.toggleReadOnly = function() {
 		$('#infoToolbar .updated-time').html(goNowToDatetime(note.UpdatedTime));
 	}
 	
+	Note.readOnly = true;
+	LEA.readOnly = true;
+	
 	if(note.readOnly) {
 		return;
 	}
@@ -1405,8 +1409,8 @@ Note.toggleReadOnly = function() {
 	Note.readOnly = true;
 };
 // 切换到编辑模式
-Note.toggleWriteable = function() {
+LEA.toggleWriteable = Note.toggleWriteable = function() {
-	var me = this;
+	var me = Note;
 
 	// $('#infoToolbar').hide();
 	$('#editor').removeClass('read-only');
@@ -1438,6 +1442,7 @@ Note.toggleWriteable = function() {
 
 	note.readOnly = false;
 	Note.readOnly = false;
+	LEA.readOnly = false;
 };
 
 Note.getPostUrl = function (note) {

public/js/plugins/editor_drop_paste.js

@@ -79,7 +79,7 @@ define('editor_drop_paste', ['jquery.ui.widget', 'fileupload'], function(){
 			var imgElm;
 			// 先显示loading...
 			d.id = '__mcenew' + (i++);
-			d.src = "http://leanote.com/images/loading-24.gif";
+			d.src = "/images/loading-24.gif";
 			imgElm = dom.createHTML('img', d);
 			tinymce.activeEditor.insertContent(imgElm);
 			imgElm = dom.get(d.id);
@@ -147,7 +147,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="/tinymce/plugins/leaui_image/public/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="/public/album/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>');
@@ -170,7 +170,7 @@ define('editor_drop_paste', ['jquery.ui.widget', 'fileupload'], function(){
 	            } else {
 	                data.context.empty();
 	                var tpl = $('<li><div class="alert alert-danger"><a class="close" data-dismiss="alert">×</a></div></li>');
-	                tpl.find('div').append('<b>Error:</b> ' + data.files[0].name + ' <small>[<i>' + formatFileSize(data.files[0].size) + '</i>]</small> ' + data.result.Msg);
+	                tpl.find('div').append('<b>' + getMsg('Error') + ':</b> ' + data.files[0].name + ' <small>[<i>' + formatFileSize(data.files[0].size) + '</i>]</small> ' + data.result.Msg);
 	                data.context.append(tpl);
 	                setTimeout((function(tpl) {
 	                	return function() {
@@ -183,7 +183,7 @@ define('editor_drop_paste', ['jquery.ui.widget', 'fileupload'], function(){
 	        fail: function(e, data) {
 	            data.context.empty();
 	            var tpl = $('<li><div class="alert alert-danger"><a class="close" data-dismiss="alert">×</a></div></li>');
-	            tpl.find('div').append('<b>Error:</b> ' + data.files[0].name + ' <small>[<i>' + formatFileSize(data.files[0].size) + '</i>]</small> ' + data.errorThrown);
+	            tpl.find('div').append('<b>' + getMsg('Error') + ':</b> ' + data.files[0].name + ' <small>[<i>' + formatFileSize(data.files[0].size) + '</i>]</small> ' + data.errorThrown);
 	            data.context.append(tpl);
 	            setTimeout((function(tpl) {
 	                	return function() {
@@ -247,14 +247,21 @@ define('editor_drop_paste', ['jquery.ui.widget', 'fileupload'], function(){
 		    } while (node != null);
 		    if (found) {
 		        dropZone.addClass('hover');
+		        
+		        // 如果在只读状态, 转换之
+			    if (LEA.readOnly) {
+			    	LEA.toggleWriteable();
+			    }
+			    
 		    } else {
 		        dropZone.removeClass('hover');
 		    }
+		    
 		    window.dropZoneTimeout = setTimeout(function () {
 		        window.dropZoneTimeout = null;
 		        dropZone.removeClass('in hover');
 		        hideUpload();
-		    }, 100);
+		    }, 500);
 		});
 	};
 

public/tinymce/plugins/leaui_image/plugin.js

@@ -202,16 +202,25 @@ tinymce.PluginManager.add('leaui_image', function(editor, url) {
 
 	// 为解决在editor里拖动图片问题
 	// 2014/7/8 21:43 浮躁的一天终有收获
+	// 2015/10/16
+	// TODO 如果把编辑器内的图片拖到外面去, 还是会出现drop images to here
     var dragStart = false;
     editor.on("dragstart", function(e) {
+    	// readonly时不让drag图片
+    	if (LEA.readOnly) {
+	    	e.preventDefault();
+	    	e.stopPropagation();
+    	}
     	dragStart = true;
     });
     editor.on("dragend", function(e) {
     	dragStart = false;
     });
 	editor.on("dragover", function(e) {
-		if(!dragStart) {
+	    if(dragStart) {
-    		$("body").trigger("dragover");
+    		// 表示编辑器内在拖动图片, 则停止冒泡
+    		e.preventDefault();
+	    	e.stopPropagation();
     	}
     });
 });

public/tinymce/plugins/leaui_image/plugin.min.js

@@ -1 +1 @@
-var LEAUI_DATAS=[];tinymce.PluginManager.add("leaui_image",function(a,b){function c(a,b){function c(a,c){d.parentNode.removeChild(d),b({width:a,height:c})}var d=document.createElement("img");d.onload=function(){c(d.clientWidth,d.clientHeight)},d.onerror=function(){c()},d.src=a;var e=d.style;e.visibility="hidden",e.position="fixed",e.bottom=e.left=0,e.width=e.height="auto",document.body.appendChild(d)}function d(){function d(){var a='<iframe id="leauiIfr" src="/album/index?'+(new Date).getTime()+'" frameborder="0"></iframe>';return a}var e=a.dom,f=a.selection.getContent(),g=/<img.*?\/>/g,h=f.match(g),i=document.createElement("p"),j=[];for(var k in h){i.innerHTML=h[k];var l=i.firstChild;if(l&&"IMG"==l.nodeName){var m={};m.src=e.getAttrib(l,"data-src")||e.getAttrib(l,"src"),m.width=e.getAttrib(l,"width"),m.height=e.getAttrib(l,"height"),m.title=e.getAttrib(l,"title"),j.push(m)}}LEAUI_DATAS=j;var n=$(document).width()-10;n>805&&(n=805);var o=$(document).height()-100;o>365&&(o=365),win=a.windowManager.open({title:"Image",width:n,height:o,html:d(),buttons:[{text:"Cancel",onclick:function(){this.parent().parent().close()}},{text:"Insert Image",subtype:"primary",onclick:function(d){for(var f=document.getElementById("leauiIfr").contentWindow,g=f.document.getElementById("preview"),h=g.childNodes,i=[],j=0;j<h.length;++j){var d=h[j];if(d.firstChild&&"IMG"==d.firstChild.nodeName){var k=d.firstChild,l={};l.src=k.getAttribute("src"),l.width=k.getAttribute("data-width"),l.height=k.getAttribute("data-height"),l.title=k.getAttribute("data-title"),i.push(l)}}for(var j in i){var m,n=i[j],o=n.src;m=-1!=o.indexOf("http://")||-1!=o.indexOf("https://")?o:b+"/"+o,n.src=m;var p=function(b){var d=function(b,c){var d,f={};return f.id="__mcenew"+c,f.src="http://leanote.com/images/loading-24.gif",d=e.createHTML("img",f),a.insertContent(d),d=e.get(f.id),function(a){a&&a.width&&(a.width>600&&(a.width=600),b.width=a.width),e.setAttrib(d,"src",b.src),e.setAttrib(d,"title",b.title),e.setAttrib(d,"id",null)}}(b,j);c(b.src,d)},q="";if(fileIds=m.split("fileId="),2==fileIds.length&&fileIds[1].length=="53aecf8a8a039a43c8036282".length&&(q=fileIds[1]),q){var r;Note&&Note.getCurNote&&(r=Note.getCurNote()),r&&r.UserId!=UserInfo.UserId?!function(a){ajaxPost("/file/copyImage",{userId:UserInfo.UserId,fileId:q,toUserId:r.UserId},function(b){if(reIsOk(b)&&b.Id){var c=UrlPrefix;a.src=c+"/file/outputImage?fileId="+b.Id}p(a)})}(n):p(n)}else p(n)}this.parent().parent().close()}}]})}a.addButton("leaui_image",{icon:"image",tooltip:"Insert/edit image",onclick:d,stateSelector:"img:not([data-mind-json])"}),a.addMenuItem("leaui_image",{icon:"image",text:"Insert image",onclick:d,context:"insert",prependToContext:!0});var e=!1;a.on("dragstart",function(a){e=!0}),a.on("dragend",function(a){e=!1}),a.on("dragover",function(a){e||$("body").trigger("dragover")})});
+var LEAUI_DATAS=[];tinymce.PluginManager.add("leaui_image",function(a,b){function c(a,b){function c(a,c){d.parentNode.removeChild(d),b({width:a,height:c})}var d=document.createElement("img");d.onload=function(){c(d.clientWidth,d.clientHeight)},d.onerror=function(){c()},d.src=a;var e=d.style;e.visibility="hidden",e.position="fixed",e.bottom=e.left=0,e.width=e.height="auto",document.body.appendChild(d)}function d(){function d(){var a='<iframe id="leauiIfr" src="/album/index?'+(new Date).getTime()+'" frameborder="0"></iframe>';return a}var e=a.dom,f=a.selection.getContent(),g=/<img.*?\/>/g,h=f.match(g),i=document.createElement("p"),j=[];for(var k in h){i.innerHTML=h[k];var l=i.firstChild;if(l&&"IMG"==l.nodeName){var m={};m.src=e.getAttrib(l,"data-src")||e.getAttrib(l,"src"),m.width=e.getAttrib(l,"width"),m.height=e.getAttrib(l,"height"),m.title=e.getAttrib(l,"title"),j.push(m)}}LEAUI_DATAS=j;var n=$(document).width()-10;n>805&&(n=805);var o=$(document).height()-100;o>365&&(o=365),win=a.windowManager.open({title:"Image",width:n,height:o,html:d(),buttons:[{text:"Cancel",onclick:function(){this.parent().parent().close()}},{text:"Insert Image",subtype:"primary",onclick:function(d){for(var f=document.getElementById("leauiIfr").contentWindow,g=f.document.getElementById("preview"),h=g.childNodes,i=[],j=0;j<h.length;++j){var d=h[j];if(d.firstChild&&"IMG"==d.firstChild.nodeName){var k=d.firstChild,l={};l.src=k.getAttribute("src"),l.width=k.getAttribute("data-width"),l.height=k.getAttribute("data-height"),l.title=k.getAttribute("data-title"),i.push(l)}}for(var j in i){var m,n=i[j],o=n.src;m=-1!=o.indexOf("http://")||-1!=o.indexOf("https://")?o:b+"/"+o,n.src=m;var p=function(b){var d=function(b,c){var d,f={};return f.id="__mcenew"+c,f.src="http://leanote.com/images/loading-24.gif",d=e.createHTML("img",f),a.insertContent(d),d=e.get(f.id),function(a){a&&a.width&&(a.width>600&&(a.width=600),b.width=a.width),e.setAttrib(d,"src",b.src),e.setAttrib(d,"title",b.title),e.setAttrib(d,"id",null)}}(b,j);c(b.src,d)},q="";if(fileIds=m.split("fileId="),2==fileIds.length&&fileIds[1].length=="53aecf8a8a039a43c8036282".length&&(q=fileIds[1]),q){var r;Note&&Note.getCurNote&&(r=Note.getCurNote()),r&&r.UserId!=UserInfo.UserId?!function(a){ajaxPost("/file/copyImage",{userId:UserInfo.UserId,fileId:q,toUserId:r.UserId},function(b){if(reIsOk(b)&&b.Id){var c=UrlPrefix;a.src=c+"/file/outputImage?fileId="+b.Id}p(a)})}(n):p(n)}else p(n)}this.parent().parent().close()}}]})}a.addButton("leaui_image",{icon:"image",tooltip:"Insert/edit image",onclick:d,stateSelector:"img:not([data-mind-json])"}),a.addMenuItem("leaui_image",{icon:"image",text:"Insert image",onclick:d,context:"insert",prependToContext:!0});var e=!1;a.on("dragstart",function(a){LEA.readOnly&&(a.preventDefault(),a.stopPropagation()),e=!0}),a.on("dragend",function(a){e=!1}),a.on("dragover",function(a){e&&(a.preventDefault(),a.stopPropagation())})});

public/tinymce/tinymce.full.js

@@ -39991,16 +39991,24 @@ tinymce.PluginManager.add('leaui_image', function(editor, url) {
 
 	// 为解决在editor里拖动图片问题
 	// 2014/7/8 21:43 浮躁的一天终有收获
+	// 2015/10/16
     var dragStart = false;
     editor.on("dragstart", function(e) {
+    	// readonly时不让drag图片
+    	if (LEA.readOnly) {
+	    	e.preventDefault();
+	    	e.stopPropagation();
+    	}
     	dragStart = true;
     });
     editor.on("dragend", function(e) {
     	dragStart = false;
     });
 	editor.on("dragover", function(e) {
-		if(!dragStart) {
+	    if(dragStart) {
-    		$("body").trigger("dragover");
+    		// 表示编辑器内在拖动图片, 则停止冒泡
+    		e.preventDefault();
+	    	e.stopPropagation();
     	}
     });
 });
@@ -43215,26 +43223,27 @@ tinymce.PluginManager.add('leanote_code', function(editor, url) {
 		var num = e.which ? e.which : e.keyCode;
     	if (num == 9) { // tab pressed
     		if(!e.shiftKey) {
- 				// ed.execCommand('Indent');
-    			// TODO 如果当前在li, ul, ol下不执行!!
-    			// 如果在pre下就加tab
 	    		// var node = ed.selection.getNode();
 	    		/*
 				if(node.nodeName == "PRE") {
                     ed.execCommand('mceInsertHTML', false, '\x09'); // inserts tab
 				} else {
 				*/
+				// 如果是在li下的, 就不要控制
+				var node = ed.selection.getNode();
+				if (node && node.nodeName === 'LI') {
+					return true;
+				}
 				ed.insertContent("    ");
+	            e.preventDefault();
+	            e.stopPropagation();   			
+	            return false;
                 // ed.execCommand('mceInsertHTML', false, "    "); // inserts 空格
 				// }
     		} else {
     			// delete 4 个空格
 				// ed.execCommand('Outdent');
     		}
-    		
-            e.preventDefault();
-            e.stopPropagation();   			
-            return false;
        }
 	});
 });/**