(function () {
var utils = UM.utils,
browser = UM.browser,
Base = {
checkURL: function (url) {
if(!url) return false;
url = utils.trim(url);
if (url.length <= 0) {
return false;
}
if (url.search(/http:\/\/|https:\/\//) !== 0) {
url += 'http://';
}
url=url.replace(/\?[\s\S]*$/,"");
if (!/(.gif|.jpg|.jpeg|.png)$/i.test(url)) {
return false;
}
return url;
},
getAllPic: function (sel, $w, editor) {
var me = this,
arr = [],
$imgs = $(sel, $w);
$.each($imgs, function (index, node) {
$(node).removeAttr("width").removeAttr("height");
// if (node.width > editor.options.initialFrameWidth) {
// me.scale(node, editor.options.initialFrameWidth -
// parseInt($(editor.body).css("padding-left")) -
// parseInt($(editor.body).css("padding-right")));
// }
return arr.push({
_src: node.src,
src: node.src
});
});
return arr;
},
scale: function (img, max, oWidth, oHeight) {
var width = 0, height = 0, percent, ow = img.width || oWidth, oh = img.height || oHeight;
if (ow > max || oh > max) {
if (ow >= oh) {
if (width = ow - max) {
percent = (width / ow).toFixed(2);
img.height = oh - oh * percent;
img.width = max;
}
} else {
if (height = oh - max) {
percent = (height / oh).toFixed(2);
img.width = ow - ow * percent;
img.height = max;
}
}
}
return this;
},
close: function ($img) {
$img.css({
top: ($img.parent().height() - $img.height()) / 2,
left: ($img.parent().width()-$img.width())/2
}).prev().on("click",function () {
if ( $(this).parent().remove().hasClass("edui-image-upload-item") ) {
//显示图片计数-1
Upload.showCount--;
Upload.updateView();
}
});
return this;
},
createImgBase64: function (img, file, $w) {
if (browser.webkit) {
//Chrome8+
img.src = window.webkitURL.createObjectURL(file);
} else if (browser.gecko) {
//FF4+
img.src = window.URL.createObjectURL(file);
} else {
//实例化file reader对象
var reader = new FileReader();
reader.onload = function (e) {
img.src = this.result;
$w.append(img);
};
reader.readAsDataURL(file);
}
},
callback: function (editor, $w, url, state) {
if (state == "SUCCESS") {
//显示图片计数+1
Upload.showCount++;
var $img = $(""),
$item = $("
").append($img);
if ($(".edui-image-upload2", $w).length < 1) {
$(".edui-image-content", $w).append($item);
Upload.render(".edui-image-content", 2)
.config(".edui-image-upload2");
} else {
$(".edui-image-upload2", $w).before($item).show();
}
$img.on("load", function () {
Base.scale(this, 120);
Base.close($(this));
$(".edui-image-content", $w).focus();
});
} else {
currentDialog.showTip( state );
window.setTimeout( function () {
currentDialog.hideTip();
}, 3000 );
}
Upload.toggleMask();
}
};
/*
* 本地上传
* */
var Upload = {
showCount: 0,
uploadTpl: '' +
'' +
'' +
'
',
init: function (editor, $w) {
var me = this;
me.editor = editor;
me.dialog = $w;
me.render(".edui-image-local", 1);
me.config(".edui-image-upload1");
me.submit();
me.drag();
$(".edui-image-upload1").hover(function () {
$(".edui-image-icon", this).toggleClass("hover");
});
if (!(UM.browser.ie && UM.browser.version <= 9)) {
$(".edui-image-dragTip", me.dialog).css("display", "block");
}
return me;
},
render: function (sel, t) {
var me = this;
$(sel, me.dialog).append($(me.uploadTpl.replace(/%%/g, t)));
return me;
},
config: function (sel) {
var me = this,
url=me.editor.options.imageUrl;
url=url + (url.indexOf("?") == -1 ? "?" : "&") + "editorid="+me.editor.id;//初始form提交地址;
$("form", $(sel, me.dialog)).attr("action", url);
return me;
},
uploadComplete: function(r){
var me = this;
try{
var json = eval('('+r+')');
Base.callback(me.editor, me.dialog, json.url, json.state);
}catch (e){
var lang = me.editor.getLang('image');
Base.callback(me.editor, me.dialog, '', (lang && lang.uploadError) || 'Error!');
}
},
submit: function (callback) {
var me = this,
input = $( ''),
input = input[0];
$(me.dialog).delegate( ".edui-image-file", "change", function ( e ) {
if ( !this.parentNode ) {
return;
}
$('').insertBefore(me.dialog).on('load', function(){
var r = this.contentWindow.document.body.innerHTML;
if(r == '')return;
me.uploadComplete(r);
$(this).unbind('load');
$(this).remove();
});
$(this).parent()[0].submit();
Upload.updateInput( input );
me.toggleMask("Loading....");
callback && callback();
});
return me;
},
//更新input
updateInput: function ( inputField ) {
$( ".edui-image-file", this.dialog ).each( function ( index, ele ) {
ele.parentNode.replaceChild( inputField.cloneNode( true ), ele );
} );
},
//更新上传框
updateView: function () {
if ( Upload.showCount !== 0 ) {
return;
}
$(".edui-image-upload2", this.dialog).hide();
$(".edui-image-dragTip", this.dialog).show();
$(".edui-image-upload1", this.dialog).show();
},
drag: function () {
var me = this;
//做拽上传的支持
if (!UM.browser.ie9below) {
me.dialog.find('.edui-image-content').on('drop',function (e) {
//获取文件列表
var fileList = e.originalEvent.dataTransfer.files;
var img = document.createElement('img');
var hasImg = false;
$.each(fileList, function (i, f) {
if (/^image/.test(f.type)) {
//创建图片的base64
Base.createImgBase64(img, f, me.dialog);
var xhr = new XMLHttpRequest();
xhr.open("post", me.editor.getOpt('imageUrl') + "?type=ajax", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
//模拟数据
var fd = new FormData();
fd.append(me.editor.getOpt('imageFieldName'), f);
xhr.send(fd);
xhr.addEventListener('load', function (e) {
var r = e.target.response, json;
me.uploadComplete(r);
if (i == fileList.length - 1) {
$(img).remove()
}
});
hasImg = true;
}
});
if (hasImg) {
e.preventDefault();
me.toggleMask("Loading....");
}
}).on('dragover', function (e) {
e.preventDefault();
});
}
},
toggleMask: function (html) {
var me = this;
var $mask = $(".edui-image-mask", me.dialog);
if (html) {
if (!(UM.browser.ie && UM.browser.version <= 9)) {
$(".edui-image-dragTip", me.dialog).css( "display", "none" );
}
$(".edui-image-upload1", me.dialog).css( "display", "none" );
$mask.addClass("edui-active").html(html);
} else {
$mask.removeClass("edui-active").html();
if ( Upload.showCount > 0 ) {
return me;
}
if (!(UM.browser.ie && UM.browser.version <= 9) ){
$(".edui-image-dragTip", me.dialog).css("display", "block");
}
$(".edui-image-upload1", me.dialog).css( "display", "block" );
}
return me;
}
};
/*
* 网络图片
* */
var NetWork = {
init: function (editor, $w) {
var me = this;
me.editor = editor;
me.dialog = $w;
me.initEvt();
},
initEvt: function () {
var me = this,
url,
$ele = $(".edui-image-searchTxt", me.dialog);
$(".edui-image-searchAdd", me.dialog).on("click", function () {
url = Base.checkURL($ele.val());
if (url) {
$("").on("load", function () {
var $item = $("").append(this);
$(".edui-image-searchRes", me.dialog).append($item);
Base.scale(this, 120);
$item.width($(this).width());
Base.close($(this));
$ele.val("");
});
}
})
.hover(function () {
$(this).toggleClass("hover");
});
}
};
var $tab = null,
currentDialog = null;
UM.registerWidget('image', {
tpl: "image.css\">" +
"" +
"
" +
"
" +
"
" +
"
" +
"
" +
"
<%=lang_input_dragTip%>
" +
"
" +
"
" +
"
" +
"
",
initContent: function (editor, $dialog) {
var lang = editor.getLang('image')["static"],
opt = $.extend({}, lang, {
image_url: UMEDITOR_CONFIG.UMEDITOR_HOME_URL + 'dialogs/image/'
});
Upload.showCount = 0;
if (lang) {
var html = $.parseTmpl(this.tpl, opt);
}
currentDialog = $dialog.edui();
this.root().html(html);
},
initEvent: function (editor, $w) {
$tab = $.eduitab({selector: ".edui-image-wrapper"})
.edui().on("beforeshow", function (e) {
e.stopPropagation();
});
Upload.init(editor, $w);
NetWork.init(editor, $w);
},
buttons: {
'ok': {
exec: function (editor, $w) {
var sel = "",
index = $tab.activate();
if (index == 0) {
sel = ".edui-image-content .edui-image-pic";
} else if (index == 1) {
sel = ".edui-image-searchRes .edui-image-pic";
}
var list = Base.getAllPic(sel, $w, editor);
if (index != -1) {
editor.execCommand('insertimage', list);
}
}
},
'cancel': {}
},
width: 700,
height: 408
}, function (editor, $w, url, state) {
Base.callback(editor, $w, url, state)
})
})();