使用ueditor的時候宁仔，我們后端的接口經(jīng)常需要用自己服務(wù)端的，而且返回的格式通常也是自定義的斗忌，無法和ueditor原來的兼容闯第，這時候就需要自定義按鈕市栗，官網(wǎng)的文檔里提供了二次開發(fā)的說明，本文將詳細(xì)介紹如果自定義一個dialog按鈕實現(xiàn)上傳文件的功能乡括，本文以官網(wǎng)下載的php開發(fā)版為例
添加dialgo按鈕
將官方示例代碼復(fù)制到你下載的ueditor 的index.html中就能看到效果了肃廓，此時你的編輯器就會多了一個按鈕智厌，點擊會出現(xiàn)一個dialog诲泌，示例代碼自動添加了一個確定和取消按鈕，觀察dom結(jié)構(gòu)可以發(fā)現(xiàn) iframe是嵌入在 dialog的標(biāo)題和按鈕之間的铣鹏。
其中敷扫，我們需要格外留意的是
//iframe src 的路徑
iframeUrl:'customizeDialogPage.html',
//按鈕的圖標(biāo)
cssRules :'background-position: -500px 0;',
光有這些還遠(yuǎn)遠(yuǎn)不夠，我們需要根iframe通信诚卸，需要對確定按鈕作出響應(yīng)葵第，這時候就可以參考其他按鈕的代碼了，此處以spechars 特殊字符為例
在ueditor.all.js中搜索spechars發(fā)現(xiàn)它的dialog定義在這里：
var iframeUrlMap = {
'spechars':'~/dialogs/spechars/spechars.html',
}
其目錄結(jié)構(gòu)如下：
spechars
├── spechars.html
└── spechars.js
spechars.js中有一些全局變量(domUtils合溺，editor卒密，dialog)，在spechars.html中發(fā)現(xiàn)引入了如下的js文件
<script type="text/javascript" src="../internal.js"></script>
internal.js在dialogs的根目錄下棠赛，為所有的dialogs定義了全局的變量：
var parent = window.parent;
//dialog對象
dialog = parent.$EDITORUI[window.frameElement.id.replace( /_iframe$/, '' )];
//當(dāng)前打開dialog的編輯器實例
editor = dialog.editor;
UE = parent.UE;
domUtils = UE.dom.domUtils;
utils = UE.utils;
browser = UE.browser;
ajax = UE.ajax;
給確定按鈕添加事件
dialog.ontest = function (){
console.log('ontest');
}
在定義按鈕的時候調(diào)用該事件
buttons:[
{
className:'edui-okbutton',
label:'確定',
onclick:function () {
## 調(diào)用自定義事件
dialog.ontest('my upload');
}
},
{
className:'edui-cancelbutton',
label:'取消',
onclick:function () {
dialog.close(false);
}
}
]});
至此一個自定義的按鈕已經(jīng)完成
設(shè)置不可編輯
如果要這個自定義的按鈕可以正確的響應(yīng)ue.setDisabled()和ue.setEnabled()還需要監(jiān)聽事件哮奇，增加如下代碼：
editor.on('selectionchange', function(){
var state = this.queryCommandState(uiName);
if (state == -1) {
btn.setDisabled(true);
} else {
btn.setDisabled(false);
}
})
至此按鈕已經(jīng)添加成功了膛腐，可以在這里下載到示例代碼。
