使用ueditor的时候，我们后端的接口经常需要用自己服务端的，而且返回的格式通常也是自定义的，无法和ueditor原来的兼容，这时候就需要自定义按钮，官网的文档里提供了二次开发的说明，本文将详细介绍如果自定义一个dialog按钮实现上传文件的功能，本文以官网下载的php开发版为例
添加dialgo按钮
将官方示例代码复制到你下载的ueditor 的index.html中就能看到效果了，此时你的编辑器就会多了一个按钮，点击会出现一个dialog，示例代码自动添加了一个确定和取消按钮，观察dom结构可以发现 iframe是嵌入在 dialog的标题和按钮之间的。
其中，我们需要格外留意的是
//iframe src 的路径
iframeUrl:'customizeDialogPage.html',
//按钮的图标
cssRules :'background-position: -500px 0;',
光有这些还远远不够，我们需要根iframe通信，需要对确定按钮作出响应，这时候就可以参考其他按钮的代码了，此处以spechars 特殊字符为例
在ueditor.all.js中搜索spechars发现它的dialog定义在这里：
var iframeUrlMap = {
'spechars':'~/dialogs/spechars/spechars.html',
}
其目录结构如下：
spechars
├── spechars.html
└── spechars.js
spechars.js中有一些全局变量(domUtils，editor，dialog)，在spechars.html中发现引入了如下的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$/, '' )];
//当前打开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');
}
在定义按钮的时候调用该事件
buttons:[
{
className:'edui-okbutton',
label:'确定',
onclick:function () {
## 调用自定义事件
dialog.ontest('my upload');
}
},
{
className:'edui-cancelbutton',
label:'取消',
onclick:function () {
dialog.close(false);
}
}
]});
至此一个自定义的按钮已经完成
设置不可编辑
如果要这个自定义的按钮可以正确的响应ue.setDisabled()和ue.setEnabled()还需要监听事件，增加如下代码：
editor.on('selectionchange', function(){
var state = this.queryCommandState(uiName);
if (state == -1) {
btn.setDisabled(true);
} else {
btn.setDisabled(false);
}
})
至此按钮已经添加成功了，可以在这里下载到示例代码。
