(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) {
console.log('uploadComplete');
var me = this;
try {
var json = JSON.parse(r);
var state = json.code === 1 ? 'SUCCESS' : 'Error!';
Base.callback(me.editor, me.dialog, json.data.file_path, state);
} catch (e) {
var lang = me.editor.getLang('image');
Base.callback(me.editor, me.dialog, '', (lang && lang.uploadError) || 'Error!');
}
},
submit: function(callback) {
console.log('submit');
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.innerText;
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)
})
})();