2019獨角獸企業重金招聘Python工程師標準>>>

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

轉載于:https://my.oschina.net/mickelfeng/blog/744460

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的UEditor工具栏上自定义按钮、图标、事件、窗口页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。