/** * @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); } } } } });