426 lines
13 KiB
JavaScript
426 lines
13 KiB
JavaScript
// for editor.
|
||
// drag image to editor
|
||
var urlPrefix = UrlPrefix; // window.location.protocol + "//" + window.location.host;
|
||
define('editor_drop_paste', ['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">' +
|
||
'<img class="loader" src="/images/ajax-loader.gif">' +
|
||
'<div class="progress">' +
|
||
'<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">' +
|
||
'0%' +
|
||
'</div>' +
|
||
'</div>' +
|
||
'</div>';
|
||
this.containerStr = str;
|
||
|
||
editor.insertContent(str);
|
||
insertPIfNotExists();
|
||
|
||
var container = $('#' + id);
|
||
this.container = container;
|
||
this.id = id;
|
||
this.processBar = container.find('.progress-bar');
|
||
}
|
||
Process.prototype.update = function(process) {
|
||
var me = this;
|
||
// 98%, 不要小数
|
||
process = Math.ceil(process * 100);
|
||
if(process >= 100) {
|
||
process = 99;
|
||
}
|
||
process += "%";
|
||
$('#' + me.id + ' .progress-bar').html(process).css('width', process);
|
||
}
|
||
Process.prototype.replace = function(src) {
|
||
var me = this;
|
||
getImageSize(src, function() {
|
||
$('#' + me.id).replaceWith('<img src="' + src + '" />');
|
||
});
|
||
}
|
||
Process.prototype.remove = function() {
|
||
var me = this;
|
||
$('#' + me.id).remove();
|
||
}
|
||
|
||
// 当url改变时, 得到图片的大小
|
||
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);
|
||
}
|
||
|
||
var i = 1;
|
||
function insertImage(data) {
|
||
var editor = tinymce.activeEditor;
|
||
var dom = editor.dom;
|
||
|
||
var renderImage = function(data2) {
|
||
// 这里, 如果图片宽度过大, 这里设置成500px
|
||
var d = {};
|
||
var imgElm;
|
||
// 先显示loading...
|
||
d.id = '__mcenew' + (i++);
|
||
d.src = "/images/loading-24.gif";
|
||
imgElm = dom.createHTML('img', d);
|
||
tinymce.activeEditor.insertContent(imgElm);
|
||
imgElm = dom.get(d.id);
|
||
|
||
function callback (wh) {
|
||
dom.setAttrib(imgElm, 'src', data2.src);
|
||
// dom.setAttrib(imgElm, 'width', data2.width);
|
||
if(data2.title) {
|
||
dom.setAttrib(imgElm, 'title', data2.title);
|
||
}
|
||
|
||
dom.setAttrib(imgElm, 'id', null);
|
||
};
|
||
getImageSize(data.src, callback);
|
||
}
|
||
|
||
//-------------
|
||
// outputImage?fileId=123232323
|
||
var fileId = "";
|
||
fileIds = data.src.split("fileId=")
|
||
if(fileIds.length == 2 && fileIds[1].length == "53aecf8a8a039a43c8036282".length) {
|
||
fileId = fileIds[1];
|
||
}
|
||
if(fileId) {
|
||
// 得到fileId, 如果这个笔记不是我的, 那么肯定是协作的笔记, 那么需要将图片copy给原note owner
|
||
var curNote = Note.getCurNote();
|
||
if(curNote && curNote.UserId != UserInfo.UserId) {
|
||
(function(data) {
|
||
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 + "/api/file/getImage?fileId=" + re.Id;
|
||
}
|
||
renderImage(data);
|
||
});
|
||
})(data);
|
||
} else {
|
||
renderImage(data);
|
||
}
|
||
} else {
|
||
renderImage(data);
|
||
}
|
||
}
|
||
|
||
var initUploader = function() {
|
||
var ul = $('#upload ul');
|
||
|
||
$('#drop a').click(function() {
|
||
// trigger to show file select
|
||
$(this).parent().find('input').click();
|
||
});
|
||
|
||
// Initialize the jQuery File Upload plugin
|
||
$('#upload').fileupload({
|
||
dataType: 'json',
|
||
pasteZone: '', // 不允许paste
|
||
acceptFileTypes: /(\.|\/)(gif|jpg|jpeg|png|jpe)$/i,
|
||
maxFileSize: 210000,
|
||
|
||
// This element will accept file drag/drop uploading
|
||
dropZone: $('#drop'),
|
||
formData: function(form) {
|
||
return [{name: 'albumId', value: ""}]
|
||
},
|
||
// 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="/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>');
|
||
|
||
// Add the HTML to the UL element
|
||
data.context = tpl.appendTo(ul);
|
||
|
||
// data.form[0].action += "&album_id=" + $("#albumsForUpload").val();
|
||
|
||
// Automatically upload the file once it is added to the queue
|
||
var jqXHR = data.submit();
|
||
},
|
||
|
||
done: function(e, data) {
|
||
if (data.result.Ok == true) {
|
||
data.context.remove();
|
||
// life
|
||
var data2 = {src: urlPrefix + "/api/file/getImage?fileId=" + data.result.Id}
|
||
insertImage(data2);
|
||
} 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>' + 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() {
|
||
tpl.remove();
|
||
}
|
||
})(tpl), 2000);
|
||
}
|
||
$("#uploadMsg").scrollTop(1000);
|
||
},
|
||
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>' + 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() {
|
||
tpl.remove();
|
||
}
|
||
})(tpl), 2000);
|
||
|
||
$("#uploadMsg").scrollTop(1000);
|
||
}
|
||
});
|
||
|
||
// Prevent the default action when a file is dropped on the window
|
||
$(document).on('drop dragover', function(e) {
|
||
e.preventDefault();
|
||
});
|
||
|
||
// Helper function that formats the file sizes
|
||
function formatFileSize(bytes) {
|
||
if (typeof bytes !== 'number') {
|
||
return '';
|
||
}
|
||
if (bytes >= 1000000000) {
|
||
return (bytes / 1000000000).toFixed(2) + ' GB';
|
||
}
|
||
if (bytes >= 1000000) {
|
||
return (bytes / 1000000).toFixed(2) + ' MB';
|
||
}
|
||
return (bytes / 1000).toFixed(2) + ' KB';
|
||
}
|
||
|
||
function showUpload() {
|
||
$("#upload").css("z-index", 12);
|
||
var top = +$("#mceToolbar").css("height").slice(0, -2); // px
|
||
$("#upload").css("top", top - 8);
|
||
$("#upload").show();
|
||
}
|
||
|
||
function hideUpload() {
|
||
$("#upload").css("z-index", 0).css("top", "auto").hide();
|
||
}
|
||
|
||
// drag css
|
||
$(document).bind('dragover', function (e) {
|
||
var dropZone = $('#drop'),
|
||
timeout = window.dropZoneTimeout;
|
||
if (!timeout) {
|
||
dropZone.addClass('in');
|
||
showUpload();
|
||
} else {
|
||
clearTimeout(timeout);
|
||
}
|
||
|
||
var found = false,
|
||
node = e.target;
|
||
do {
|
||
if (node === dropZone[0]) {
|
||
found = true;
|
||
break;
|
||
}
|
||
node = node.parentNode;
|
||
} 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();
|
||
}, 500);
|
||
});
|
||
};
|
||
|
||
var lastTime = 0;
|
||
|
||
// pasteImage
|
||
var pasteImageInit = function() {
|
||
var curNote;
|
||
// Initialize the jQuery File Upload plugin
|
||
var dom, editor;
|
||
// 2015/4/17 添加wmd-input markdown paste image
|
||
$('#editorContent, #wmd-input .editor-content').fileupload({
|
||
dataType: 'json',
|
||
pasteZone: $('#editorContent, #wmd-input'),
|
||
dropZone: '', // 只允许paste
|
||
maxFileSize: 210000,
|
||
url: "/file/pasteImage",
|
||
paramName: 'file',
|
||
formData: function(form) {
|
||
return [{name: 'from', value: 'pasteImage'}, {name: 'noteId', value: Note.curNoteId}]
|
||
},
|
||
/*
|
||
paste: function(e, data) {
|
||
var jqXHR = data.submit();
|
||
},
|
||
*/
|
||
progress: function(e, data) {
|
||
if(curNote && !curNote.IsMarkdown) {
|
||
data.process.update(data.loaded / data.total);
|
||
}
|
||
},
|
||
|
||
// 调用了两次
|
||
// 不知道为什么会触发两次
|
||
add: function(e, data) {
|
||
// 防止两次
|
||
var now = (new Date()).getTime();
|
||
if (now - lastTime < 500) {
|
||
// console.log('haha');
|
||
return;
|
||
}
|
||
// console.log('nono');
|
||
lastTime = now;
|
||
|
||
var note = Note.getCurNote();
|
||
curNote = note;
|
||
if(!note || note.IsNew) {
|
||
alert("This note hasn't saved, please save it firstly!")
|
||
return;
|
||
}
|
||
// 先显示loading...
|
||
editor = tinymce.EditorManager.activeEditor;
|
||
if(!note.IsMarkdown) {
|
||
var process = new Process(editor);
|
||
}
|
||
data.process = process;
|
||
var jqXHR = data.submit();
|
||
|
||
/*
|
||
d.id = '__mcenew' + (new Date()).getTime();
|
||
d.src = "http://leanote.com/images/loading-24.gif"; // 写死了
|
||
var img = '<img src="' + d.src + '" id="' + d.id + '" />';
|
||
editor.insertContent(img);
|
||
var imgElm = $(d.id);
|
||
data.imgId = d.id;
|
||
data.context = imgElm;
|
||
*/
|
||
|
||
/*
|
||
// 上传之
|
||
var c = new FormData;
|
||
c.append("from", "pasteImage");
|
||
// 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/pasteImage", contentType:false, processData:false , data: c, type: "POST"}
|
||
).done(function(re) {
|
||
if(!re || typeof re != "object" || !re.Ok) {
|
||
// 删除
|
||
dom.remove(imgElm);
|
||
return;
|
||
}
|
||
// 这里, 如果图片宽度过大, 这里设置成500px
|
||
var urlPrefix = UrlPrefix; // window.location.protocol + "//" + window.location.host;
|
||
var src = urlPrefix + "/api/file/getImage?fileId=" + re.Id;
|
||
getImageSize(src, 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', src);
|
||
});
|
||
dom.setAttrib(imgElm, 'id', null);
|
||
});
|
||
};
|
||
reader.readAsDataURL(blob);
|
||
*/
|
||
},
|
||
|
||
done: function(e, data) {
|
||
if (data.result.Ok == true) {
|
||
// 这里, 如果图片宽度过大, 这里设置成500px
|
||
var re = data.result;
|
||
var urlPrefix = UrlPrefix; // window.location.protocol + "//" + window.location.host;
|
||
var src = urlPrefix + "/api/file/getImage?fileId=" + re.Id;
|
||
|
||
if(curNote && !curNote.IsMarkdown) {
|
||
data.process.replace(src);
|
||
} else {
|
||
MD && MD.insertLink(src, 'title', true);
|
||
}
|
||
|
||
/*
|
||
getImageSize(src, function() {
|
||
$img.attr('src', src);
|
||
$img.removeAttr('id');
|
||
});
|
||
*/
|
||
} else {
|
||
data.process.remove();
|
||
}
|
||
},
|
||
fail: function(e, data) {
|
||
if(curNote && !curNote.IsMarkdown) {
|
||
data.process.remove();
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
initUploader();
|
||
pasteImageInit();
|
||
});
|