xuemingqiang/leanote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
https://github.com/leanote/leanote/issues/231
This commit is contained in:
lealife
2015-10-17 15:53:35 +08:00
parent 60e3b9446a
commit 90ce35327f
8 changed files with 59 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/views/note/note-dev.html
View File

@ -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">

1
messages/msg.zh
View File

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

9
public/js/app/note.js
View File

@ -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() {
var me = this;
LEA.toggleWriteable = Note.toggleWriteable = function() {
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) {

17
public/js/plugins/editor_drop_paste.js
View File

@ -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);
});
};

13
public/tinymce/plugins/leaui_image/plugin.js
View File

@ -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) {
$("body").trigger("dragover");
if(dragStart) {
// 表示编辑器内在拖动图片, 则停止冒泡
e.preventDefault();
e.stopPropagation();
}
});
});

2
public/tinymce/plugins/leaui_image/plugin.min.js vendored
View File

@ -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())})});

27
public/tinymce/tinymce.full.js
View File

@ -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) {
$("body").trigger("dragover");
if(dragStart) {
// 表示编辑器内在拖动图片, 则停止冒泡
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("&nbsp;&nbsp;&nbsp;&nbsp;");
e.preventDefault();
e.stopPropagation();
return false;
// ed.execCommand('mceInsertHTML', false, "&nbsp;&nbsp;&nbsp;&nbsp;"); // inserts 空格
// }
} else {
// delete 4 个空格
// ed.execCommand('Outdent');
}
e.preventDefault();
e.stopPropagation();
return false;
}
});
});/**

2
public/tinymce/tinymce.full.min.js vendored
View File

File diff suppressed because one or more lines are too long