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', 再次刷新頁面點擊一下按鈕吧！