init
This commit is contained in:
life
230
public/tinymce/plugins/leanote_image/js/dialog.js
Normal file
230
public/tinymce/plugins/leanote_image/js/dialog.js
Normal file
@@ -0,0 +1,230 @@
|
||||
|
||||
/**
|
||||
* http://leanote.com
|
||||
*/
|
||||
|
||||
var tinymce = top.tinymce;
|
||||
var editor = tinymce.EditorManager.activeEditor;
|
||||
var dom = editor.dom;
|
||||
var imgElm = editor.selection.getNode();
|
||||
|
||||
$(function() {
|
||||
// 隐藏iframe border
|
||||
// top.hiddenIframeBorder();
|
||||
|
||||
// bind event
|
||||
$("#uploader").change(function() {
|
||||
$("#upl").submit();
|
||||
leanoteImagesDialog.inProgress();
|
||||
});
|
||||
|
||||
$("#insertImageBtn").click(function() {
|
||||
insertImage();
|
||||
});
|
||||
$("#closeBtn").click(function() {
|
||||
closeWin();
|
||||
});
|
||||
|
||||
// 是否选择了image
|
||||
|
||||
var oldWidth, oldHeihgt;
|
||||
// 是否选择的是image
|
||||
if(imgElm.nodeName == "IMG") {
|
||||
var $node = $(imgElm);
|
||||
$("#imageSrc").val($node.attr("src"));
|
||||
oldWidth = $node.width();
|
||||
oldHeight = $node.height();
|
||||
$("#imageWidth").val(oldWidth);
|
||||
$("#imageHeight").val(oldHeight);
|
||||
|
||||
$('#myTab a:last').tab('show');
|
||||
} else {
|
||||
imgElm = null;
|
||||
}
|
||||
|
||||
$("#imageSrc").blur(function(){
|
||||
getImageSize($(this).val(), function(ret) {
|
||||
if(ret.width) {
|
||||
oldWidth = ret.width;
|
||||
oldHeight = ret.Height;
|
||||
|
||||
$("#imageWidth").val(ret.width);
|
||||
$("#imageHeight").val(ret.height);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 按比例缩放
|
||||
function scale(isWidth) {
|
||||
var autoScale = $("#autoScale").is(":checked");
|
||||
var width = $("#imageWidth").val();
|
||||
var height = $("#imageHeight").val();
|
||||
|
||||
if(autoScale && oldWidth && oldHeight) {
|
||||
if(isWidth) {
|
||||
height = parseInt((width/oldWidth) * oldHeight);
|
||||
$("#imageHegiht").val(height);
|
||||
} else {
|
||||
width = parseInt((height/oldHeight) * oldWidth);
|
||||
$("#imageWidth").val(width);
|
||||
}
|
||||
}
|
||||
|
||||
oldWidth = width;
|
||||
oldHeight = height;
|
||||
}
|
||||
|
||||
$("#imageWidth").blur(function() {
|
||||
scale(true);
|
||||
});
|
||||
$("#imageHeight").blur(function() {
|
||||
scale(false);
|
||||
});
|
||||
});
|
||||
|
||||
//当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);
|
||||
}
|
||||
|
||||
function closeWin() {
|
||||
try {
|
||||
top.closeDialog();
|
||||
// editor.windowManager.close();
|
||||
// editor.windowManager.close();
|
||||
} catch(e) {
|
||||
}
|
||||
}
|
||||
|
||||
// 插入之
|
||||
var insertImage = function() {
|
||||
// 判断是否是第二个tab active
|
||||
if($("#myTab li:last").attr("class") != "active") {
|
||||
closeWin();
|
||||
return;
|
||||
}
|
||||
|
||||
// 加载图片并插入之
|
||||
function waitLoad(imgElm) {
|
||||
function selectImage() {
|
||||
imgElm.onload = imgElm.onerror = null;
|
||||
editor.selection.select(imgElm);
|
||||
editor.nodeChanged();
|
||||
}
|
||||
|
||||
// 如果没有设置width, height, 就用图片本身的大小
|
||||
imgElm.onload = function() {
|
||||
if (!data.width && !data.height) {
|
||||
dom.setAttribs(imgElm, {
|
||||
width: imgElm.clientWidth,
|
||||
height: imgElm.clientHeight
|
||||
});
|
||||
}
|
||||
|
||||
selectImage();
|
||||
};
|
||||
|
||||
imgElm.onerror = selectImage;
|
||||
}
|
||||
|
||||
// 这是通过url插入图片
|
||||
// iframe里得到...
|
||||
var data = {width:null, height:null, src:null, style:null};
|
||||
data.width = $("#imageWidth").val();
|
||||
data.height = $("#imageHeight").val();
|
||||
data.src = $("#imageSrc").val();
|
||||
data.alt = "";
|
||||
|
||||
editor.undoManager.transact(function() {
|
||||
// 删除图片
|
||||
if (!data.src) {
|
||||
if (imgElm) {
|
||||
dom.remove(imgElm);
|
||||
editor.nodeChanged();
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (!imgElm) {
|
||||
data.id = '__mcenew';
|
||||
editor.selection.setContent(dom.createHTML('img', data));
|
||||
imgElm = dom.get('__mcenew');
|
||||
dom.setAttrib(imgElm, 'id', null);
|
||||
} else {
|
||||
dom.setAttribs(imgElm, data);
|
||||
}
|
||||
|
||||
waitLoad(imgElm);
|
||||
});
|
||||
|
||||
closeWin();
|
||||
}
|
||||
|
||||
// 使用input上传
|
||||
var leanoteImagesDialog = {
|
||||
timeoutStore : false,
|
||||
|
||||
// 上传时
|
||||
inProgress : function() {
|
||||
$("#uploadFormContainer").hide();
|
||||
$("#uploadInProgress").show();
|
||||
// 可能是返回的数据不对
|
||||
this.timeoutStore = window.setTimeout(function() {
|
||||
$("#uploadInProgress").html("服务器发生错误, 超时.");
|
||||
}, 20000);
|
||||
},
|
||||
|
||||
// 上传结束后, 关闭窗口, 填充image
|
||||
uploadFinish : function(result) {
|
||||
if (result.resultCode == '0') {
|
||||
window.clearTimeout(this.timeoutStore);
|
||||
$("#uploadInProgress").html("服务器发生错误: " + result.result);
|
||||
} else {
|
||||
$("#uploadInProgress").html("上传成功!");
|
||||
|
||||
// 这里, 如果图片宽度过大, 这里设置成500px
|
||||
var d = {};
|
||||
var imgElm;
|
||||
getImageSize(result.filename, 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', result.filename);
|
||||
});
|
||||
// 先显示loading...
|
||||
d.id = '__mcenew';
|
||||
d.src = "http://leanote.com/images/loading-24.gif";
|
||||
editor.insertContent(dom.createHTML('img', d));
|
||||
imgElm = dom.get('__mcenew');
|
||||
dom.setAttrib(imgElm, 'id', null);
|
||||
closeWin();
|
||||
}
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user