- 修改themes\default\css\ueditor.css文件，增加以下代碼
.edui-default.edui-for-uploadimage.edui-icon{
background-position: -380px 0px;
}
- 修改ueditor.config.js文件，在【toolbars】中增加uploadimage，在【labelMap】增加'uploadimage': '上傳圖片'
- 引入以下js代碼：
/**
* 模仿ueditor的simpleupload改裝的插件
*/
UE.plugin.register('uploadimage',function(){
var me =this,
isLoaded =false,
containerBtn,
domUtils = UE.dom.domUtils,
utils = UE.utils,
uploadUrl ='http://localhost:8080/img/rc/upload',//上傳地址
picUrlPrefix ='http://localhost:8080/img/rc/get?rid=';//顯示地址
function initUploadBtn(){
var w = containerBtn.offsetWidth ||20,
h = containerBtn.offsetHeight ||20,
btnIframe = document.createElement('iframe'),
btnStyle ='display:block;width:'+ w +'px;height:'+ h +'px;overflow:hidden;border:0;margin:0;padding:0;position:absolute;top:0;left:0;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;cursor:pointer;';
domUtils.on(btnIframe,'load',function(){
var timestrap =(+new Date()).toString(36),
wrapper,
btnIframeDoc,
btnIframeBody;
btnIframeDoc =(btnIframe.contentDocument || btnIframe.contentWindow.document);
btnIframeBody = btnIframeDoc.body;
wrapper = btnIframeDoc.createElement('div');
wrapper.innerHTML ='<form id="edui_form_'+ timestrap +'" target="edui_iframe_'+ timestrap +'" method="POST" enctype="multipart/form-data" action="'+ uploadUrl +'" '+
'style="'+ btnStyle +'">'+
'<input id="edui_input_'+ timestrap +'" type="file" accept="image/*" name="'+'file'+'" '+
'style="'+ btnStyle +'">'+
'</form>'+
'<iframe id="edui_iframe_'+ timestrap +'" name="edui_iframe_'+ timestrap +'" style="display:none;width:0;height:0;border:0;margin:0;padding:0;position:absolute;"></iframe>';
wrapper.className ='edui-'+ me.options.theme;
wrapper.id = me.ui.id +'_iframeupload';
btnIframeBody.style.cssText = btnStyle;
btnIframeBody.style.width = w +'px';
btnIframeBody.style.height = h +'px';
btnIframeBody.appendChild(wrapper);
if(btnIframeBody.parentNode){
btnIframeBody.parentNode.style.width = w +'px';
btnIframeBody.parentNode.style.height = w +'px';
}
var form = btnIframeDoc.getElementById('edui_form_'+ timestrap);
var input = btnIframeDoc.getElementById('edui_input_'+ timestrap);
var iframe = btnIframeDoc.getElementById('edui_iframe_'+ timestrap);
domUtils.on(input,'change',function(){
if(!input.value)return;
var loadingId ='loading_'+(+new Date()).toString(36);
var allowFiles = null;
me.focus();
me.execCommand('inserthtml','<img class="loadingclass" id="'+ loadingId +'" src="'+ me.options.themePath + me.options.theme +'/images/spacer.gif" title="'+(me.getLang('simpleupload.loading')||'')+'" >');
function callback(){
try{
var link, json, loader,
body =(iframe.contentDocument || iframe.contentWindow.document).body,
result = body.innerText || body.textContent ||'';
json =(new Function("return "+ result))();
link = picUrlPrefix + json.rid;//組裝圖片地址
if(json.code ==1&& json.rid){
loader = me.document.getElementById(loadingId);
loader.setAttribute('src', link);
loader.setAttribute('_src', link);
loader.setAttribute('title', json.title ||'');
loader.setAttribute('alt', json.original ||'');
loader.removeAttribute('id');
domUtils.removeClasses(loader,'loadingclass');
}else{
showErrorLoader && showErrorLoader(json.state);
}
}catch(er){
showErrorLoader && showErrorLoader(me.getLang('simpleupload.loadError'));
}
form.reset();
domUtils.un(iframe,'load', callback);
input.removeAttribute("disabled");
}
function showErrorLoader(title){
if(loadingId){
var loader = me.document.getElementById(loadingId);
loader && domUtils.remove(loader);
me.fireEvent('showmessage',{
'id': loadingId,
'content': title,
'type':'error',
'timeout':4000
});
}
}
// 判斷文件格式是否錯誤
var filename = input.value,
fileext = filename ? filename.substr(filename.lastIndexOf('.')):'';
if(!fileext ||(allowFiles &&(allowFiles.join('')+'.').indexOf(fileext.toLowerCase()+'.')==-1)){
showErrorLoader(me.getLang('simpleupload.exceedTypeError'));
return;
}
domUtils.on(iframe,'load', callback);
form.action = uploadUrl;
form.submit();
});
var stateTimer;
me.addListener('selectionchange',function(){
clearTimeout(stateTimer);
stateTimer = setTimeout(function(){
input.disabled ='disabled';
},400);
});
isLoaded =true;
});
btnIframe.style.cssText = btnStyle;
containerBtn.appendChild(btnIframe);
}
return{
bindEvents:{
'ready':function(){
//設置loading的樣式
UE.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-right: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);
},
/* 初始化簡單上傳按鈕 */
'simpleuploadbtnready':function(type, container){
containerBtn = container;
initUploadBtn();
}
},
outputRule:function(root){
utils.each(root.getNodesByTagName('img'),function(n){
if(/\b(loaderrorclass)|(bloaderrorclass)\b/.test(n.getAttr('class'))){
n.parentNode.removeChild(n);
}
});
},
commands:{
'uploadimage':{
queryCommandState:function(){
return isLoaded ?0:-1;
}
}
}
}
});
var editorui = baidu.editor.ui;
editorui["uploadimage"]=function(editor){
var name ='uploadimage',
ui =new editorui.Button({
className:'edui-for-'+ name,
title: editor.options.labelMap[name]|| editor.getLang("labelMap."+ name)||'',
onclick:function(){
},
theme: editor.options.theme,
showText:false
});
editorui.buttons[name]= ui;
editor.addListener('ready',function(){
var b = ui.getDom('body'),
iconSpan = b.children[0];
editor.fireEvent('simpleuploadbtnready', iconSpan);
});
editor.addListener('selectionchange',function(type, causeByUi, uiReady){
var state = editor.queryCommandState(name);
if(state ==-1){
ui.setDisabled(true);
ui.setChecked(false);
}else{
if(!uiReady){
ui.setDisabled(false);
ui.setChecked(state);
}
}
});
return ui;
};
