UEditor工具栏上自定义按钮、图标、事件、窗口页面

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

1	toolbars:[

2	[..., 'searchreplace','help','camnpr']

3

],

4	labelMap:{

5	'anchor':'', 'undo':'','camnpr':'郑州网建'

6

}

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

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

找到此位置，咱们能够看到：

1	var iframeUrlMap = {

2

//...

3	'emotion':'~/dialogs/emotion/emotion.html',

4

//...

5

}

在此咱们能够添加一个

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

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

01	editorui["camnpr"] = function (editor, iframeUrl) {

02	var cmd = "camnpr";

03	var ui = new editorui.MultiMenuPop({

04	title:editor.options.labelMap[cmd] || editor.getLang("labelMap."+ cmd + "") || '',

05	editor:editor,

06	className:'edui-for-' + cmd,

07	iframeUrl:editor.ui.mapUrl(iframeUrl || (editor.options.iframeUrlMap || {})[cmd] || iframeUrlMap[cmd])

08

});

09	editorui.buttons[cmd] = ui;

10	editor.addListener('selectionchange', function () {

11	ui.setDisabled(editor.queryCommandState(cmd) == -1)

12

});

13	return ui;

14

};

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

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

因为此时未设置对应按钮的图片样式，因此会显示默认的“B”字符。要想让其显示成本身须要的图标样式，接着按照下面的步骤动手吧。

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

1	.edui-for-camnpr .edui-icon {

2	background-position: -640px -40px;

3

}

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

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

1	UE.commands['camnpr'] = {

2	execCommand : function(){

3	alert("你好，这是自定义按钮的事件");

4

}

5

};

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