第一步：找到editor_config.js（或者ueditor.config.js）文件中的toolbars参数，增加一个“camnpr”字符串，对应着添加一个labelMap，用于鼠标移上按钮时的提示。

toolbars:[
 [..., 'searchreplace','help','camnpr']
],
labelMap:{
 'anchor':'', 'undo':'','camnpr':'郑州网建'
}

第二步：找到ui/editorui.js文件中的btnCmds数组，在其中同样增加一个“camnpr”字符串。【如果找不到editorui.js，请直接在ueditor.all.js文件里搜索var btnCmds = [】

var btnCmds = [..., 'mergecells', 'deletetable', 'camnpr'];

找到此位置，我们可以看到：

var iframeUrlMap = {
//...
'emotion':'~/dialogs/emotion/emotion.html',
//...
}

在此我们可以添加一个

'camnpr': '~/dialogs/emotion1/camnpr.html'

这个camnpr.html页面时自定义的页面，如果你要点击此按钮弹出这个页面，还需要加入如下代码（先在ueditor.all.js页面找到 editorui["emotion"] = function 在这段代码下边加入）：

editorui["camnpr"] = function (editor, iframeUrl) {
        var cmd = "camnpr";
        var ui = new editorui.MultiMenuPop({
            title:editor.options.labelMap[cmd] || editor.getLang("labelMap." + cmd + "") || '',
            editor:editor,
            className:'edui-for-' + cmd,
            iframeUrl:editor.ui.mapUrl(iframeUrl || (editor.options.iframeUrlMap || {})[cmd] || iframeUrlMap[cmd])
        });
        editorui.buttons[cmd] = ui;
        editor.addListener('selectionchange', function () {
            ui.setDisabled(editor.queryCommandState(cmd) == -1)
        });
        return ui;
    };

注意：如果你要此功能，就不要添加【第五步】的操作了。效果图如下：

第三步：清空缓存刷新下页面吧！工具栏的对应位置是否出现了一个自己定义的按钮呢？如下图所示：

由于此时未设置对应按钮的图片样式，所以会显示默认的“B”字符。要想让其显示成自己需要的图标样式，接着按照下面的步骤动手吧。

第四步：找到themes/default/ueditor.css（或者themes/default/css/ueditor.css）文件，增加一条样式定义:

.edui-for-camnpr .edui-icon {
 background-position: -640px -40px;
}

此处的样式定义了camnpr图标在UEditor默认的精灵Icon图片（themes/default/images/icons.png）中的位置偏移。如需更改成另外图标，只需添加图标到该图片文件中，然后设置偏移值即可。

第五步：到此为止，在UI层面已经完成了一个工具栏图标的显示和各种状态变化的逻辑，但是我们发现点击按钮之后毫无反应。那是必然的，我们还必须为该按钮绑定属于它自己的事件处理方法。
实质上，此时一个默认的事件处理方法已经被UEditor绑定到按钮上了，只不过由于我们还没有定义该方法的具体内容，所以点击之后无任何变化。
下面我们就来定义该方法的具体内容：
找到plugins目录，在该目录中添加一个camnpr.js文件，然后在该文件中输入如下代码：【此句，最新版本1.4.3 请直接在 ueditor.all.js 文件里搜索UE.commands[' 然后在找到的任意一个位置下边添加如下代码】

UE.commands['camnpr'] = {
 execCommand : function(){
 alert("你好，这是自定义按钮的事件");
 }
};

然后将该文件引入UEditor：打开_examples/editor_api.js文件，在paths数组中的适当位置（一般是指默认提供的插件部分地址的最后）增加一条记录：
'plugins/webapp.js',
'plugins/showmsg.js',
'ui/ui.js',
再次刷新页面点击一下按钮吧！

原文地址：UEditor工具栏上自定义按钮、图标、事件、窗口页面 - Javascript - 郑州网建 (camnpr.com)

补充：绑定处理事件的方法

在初始化编辑器的时候，加上自己的事件处理（插入一张图片），如下代码：

var ue = UE.getEditor('editor');
ue.commands['macros'] = { 
          execCommand: function() {
            this.execCommand('insertHtml', ""); 
            return true; 
          }, 
          queryCommandState: function() { } 
        };

点击执行动作代码和效果图片：exec:function () {    this.execCommand('insertHtml', "");    return true;}

定位光标的粘贴功能：在ueditor.all.js添加

 /**
 *之所以文化添加
 * @didcplayer
 * ```javascript
 * //editor 是编辑器实例
 * editor.execCommand('控件');
 * ```
 */
UE.commands['控件'] = {
    execCommand : function( cmdName) {
        var me = this,
        range=me.selection.getRange();
          this.execCommand('insertHtml', "要粘贴的代码"); 
            return true; 
   } 
};

修改弹窗样式CSS在ueditor.css中查找：edui-default .edui-dialog，修改default为定义按钮。

弹窗网页引用的标注文字是动态获取的：修改lang/zh-cn/zh-cn.js

相关资料：UEditor工具栏上自定义按钮、图标、事件和右击菜单添加自定义按钮 (bbsmax.com)(按钮创建，下拉框知识点)

                  ueditor自定义工具栏,图标,弹窗_微无生恙的博客-CSDN博客(弹窗知识点)

                  ueditor工具栏按钮的添加、隐藏 - 简书 (jianshu.com)

                  ueditor 增加自定义按钮_杨小柒的博客-CSDN博客

                 使用 ueditor 自定义按钮 如何获取选中内容-CSDN社区

                 如何在.Net版本UEditor中添加一个普通按钮_实用技巧_脚本之家 (jb51.net)

                 【请教】修改ueditor弹出框的宽度-CSDN社区(ueditor.css样式知识点)

                 UEditor添加自定义弹窗 插入音频地址 - 🐉 - 博客园 (cnblogs.com)(绑定事件知识点)

                 ueditor使用小结 - 谦信君 - 博客园 (cnblogs.com)(基础知识)

                  ueditor编辑器二次开发与优化_水月洞天-CSDN博客（系统性修改）

                 富文本编辑器UEditor插件edui-scale位置计算不准确的问题解决 - 掘金 (juejin.cn)

                 解决Ueditor二次编辑代码语言pre不显示问题 - Fun言 (funyan.cn)

                  UEditor 自定义input,复选框,弹窗，修改，删除，取值，存值_ThisShe的博客-CSDN博客（加上修改属性知识点,这个对于弹窗功能很全面）

                UEditor+七牛，实现图片直连上传 - 走看看 (zoukankan.com)