第一步：找到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',

再次刷新頁面點擊一下按鈕吧！

總結

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

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