(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) {
$(this).trigger("edui.file.change", [Upload, me, input, callback]);
return;
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)) {
var uploadCallback = me.editor.getOpt('imageUploadCallback');
if (uploadCallback && typeof uploadCallback === 'function') {
uploadCallback.call(me, f, function (url, data) {
me.uploadComplete(JSON.stringify({url: url, state: "SUCCESS"}));
});
} else {
//创建图片的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 Select = {
init: function (editor, $w) {
var me = this;
me.editor = editor;
me.dialog = $w;
me.initEvt();
},
initEvt: function () {
var me = this;
$(".edui-image-select", me.dialog).on("click", function () {
var selectUrl = typeof Config !== 'undefined' && Config.modulename === 'index' ? 'user/attachment' : 'general/attachment/select';
parent.Fast.api.open(selectUrl + "?element_id=&multiple=true&mimetype=image/*", "选择", {
callback: function (data) {
var urlArr = data.url.split(/\,/);
urlArr.forEach(function (item, index) {
var url = Fast.api.cdnurl(item);
$("").on("load", function () {
var $item = $("").append(this);
$(".edui-image-selectRes", me.dialog).append($item);
Base.scale(this, 120);
$item.width($(this).width());
Base.close($(this));
});
});
}
});
return false;
});
}
};
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);
Select.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";
} else if (index == 2) {
sel = ".edui-image-selectRes .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)
})
})();