/** * @description * 1.拖放文件到编辑区域,自动上传并插入到选区 * 2.插入粘贴板的图片,自动上传并插入到选区 * @author Jinqn * @date 2013-10-14 */ UE.plugin.register("autoupload", function() { function sendAndInsertFile(file, editor) { var me = editor; //模拟数据 var fieldName, urlPrefix, maxSize, allowFiles, actionUrl, loadingHtml, errorHandler, successHandler, filetype = /image\/\w+/i.test(file.type) ? "image" : "file", loadingId = "loading_" + (+new Date()).toString(36); fieldName = me.getOpt(filetype + "FieldName"); urlPrefix = me.getOpt(filetype + "UrlPrefix"); maxSize = me.getOpt(filetype + "MaxSize"); allowFiles = me.getOpt(filetype + "AllowFiles"); actionUrl = me.getActionUrl(me.getOpt(filetype + "ActionName")); errorHandler = function(title) { var loader = me.document.getElementById(loadingId); loader && domUtils.remove(loader); me.fireEvent("showmessage", { id: loadingId, content: title, type: "error", timeout: 4000 }); }; if (filetype == "image") { loadingHtml = ''; successHandler = function(data) { var link = urlPrefix + data.url, loader = me.document.getElementById(loadingId); if (loader) { domUtils.removeClasses(loader, "loadingclass"); loader.setAttribute("src", link); loader.setAttribute("_src", link); loader.setAttribute("alt", data.original || ""); loader.removeAttribute("id"); me.trigger("contentchange", loader); } }; } else { loadingHtml = "

" + '' + "

"; successHandler = function(data) { var link = urlPrefix + data.url, loader = me.document.getElementById(loadingId); var rng = me.selection.getRange(), bk = rng.createBookmark(); rng.selectNode(loader).select(); me.execCommand("insertfile", { url: link }); rng.moveToBookmark(bk).select(); }; } /* 插入loading的占位符 */ me.execCommand("inserthtml", loadingHtml); /* 判断后端配置是否没有加载成功 */ if (!me.getOpt(filetype + "ActionName")) { errorHandler(me.getLang("autoupload.errorLoadConfig")); return; } /* 判断文件大小是否超出限制 */ if (file.size > maxSize) { errorHandler(me.getLang("autoupload.exceedSizeError")); return; } /* 判断文件格式是否超出允许 */ var fileext = file.name ? file.name.substr(file.name.lastIndexOf(".")) : ""; if ( (fileext && filetype != "image") || (allowFiles && (allowFiles.join("") + ".").indexOf(fileext.toLowerCase() + ".") == -1) ) { errorHandler(me.getLang("autoupload.exceedTypeError")); return; } /* 创建Ajax并提交 */ var xhr = new XMLHttpRequest(), fd = new FormData(), params = utils.serializeParam(me.queryCommandValue("serverparam")) || "", url = utils.formatUrl( actionUrl + (actionUrl.indexOf("?") == -1 ? "?" : "&") + params ); fd.append( fieldName, file, file.name || "blob." + file.type.substr("image/".length) ); fd.append("type", "ajax"); xhr.open("post", url, true); xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); xhr.addEventListener("load", function(e) { try { var json = new Function("return " + utils.trim(e.target.response))(); if (json.state == "SUCCESS" && json.url) { successHandler(json); } else { errorHandler(json.state); } } catch (er) { errorHandler(me.getLang("autoupload.loadError")); } }); xhr.send(fd); } function getPasteImage(e) { return e.clipboardData && e.clipboardData.items && e.clipboardData.items.length == 1 && /^image\//.test(e.clipboardData.items[0].type) ? e.clipboardData.items : null; } function getDropImage(e) { return e.dataTransfer && e.dataTransfer.files ? e.dataTransfer.files : null; } return { outputRule: function(root) { utils.each(root.getNodesByTagName("img"), function(n) { if (/\b(loaderrorclass)|(bloaderrorclass)\b/.test(n.getAttr("class"))) { n.parentNode.removeChild(n); } }); utils.each(root.getNodesByTagName("p"), function(n) { if (/\bloadpara\b/.test(n.getAttr("class"))) { n.parentNode.removeChild(n); } }); }, bindEvents: { defaultOptions: { //默认间隔时间 enableDragUpload: true, enablePasteUpload: true }, //插入粘贴板的图片,拖放插入图片 ready: function(e) { var me = this; if (window.FormData && window.FileReader) { var handler = function(e) { var hasImg = false, items; //获取粘贴板文件列表或者拖放文件列表 items = e.type == "paste" ? getPasteImage(e) : getDropImage(e); if (items) { var len = items.length, file; while (len--) { file = items[len]; if (file.getAsFile) file = file.getAsFile(); if (file && file.size > 0) { sendAndInsertFile(file, me); hasImg = true; } } hasImg && e.preventDefault(); } }; if (me.getOpt("enablePasteUpload") !== false) { domUtils.on(me.body, "paste ", handler); } if (me.getOpt("enableDragUpload") !== false) { domUtils.on(me.body, "drop", handler); //取消拖放图片时出现的文字光标位置提示 domUtils.on(me.body, "dragover", function(e) { if (e.dataTransfer.types[0] == "Files") { e.preventDefault(); } }); } else { if (browser.gecko) { domUtils.on(me.body, "drop", function(e) { if (getDropImage(e)) { e.preventDefault(); } }); } } //设置loading的样式 utils.cssRule( "loading", ".loadingclass{display:inline-block;cursor:default;background: url('" + this.options.themePath + this.options.theme + "/images/loading.gif') no-repeat center center transparent;border:1px solid #cccccc;margin-left:1px;height: 22px;width: 22px;}\n" + ".loaderrorclass{display:inline-block;cursor:default;background: url('" + this.options.themePath + this.options.theme + "/images/loaderror.png') no-repeat center center transparent;border:1px solid #cccccc;margin-right:1px;height: 22px;width: 22px;" + "}", this.document ); } } } }; });