Ueditor自定义按钮

使用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文件

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);
    }
})

至此按钮已经添加成功了，可以在这里下载到示例代码。