由于項目中用到了強大的UEditor富文本在線編輯器，因項目相關功能需求，而在UEditor編輯器原有的功能插件中沒有我們想要的功能，所以就要在UEditor中新增一個(多個方法也一樣)按扭并添加相應的功能。

經使用以后總結，大概有如下兩種實現方法。

說在前面的：

UEditor下載地址：http://ueditor.baidu.com/website/download.html

UEditor官方文檔：http://fex.baidu.com/ueditor

這里以UEditor v1.4.3.3 PHP UTF-8版 版本為例，以下是代碼功能模塊目錄結構：

注：由于剛下載下來的UEditor編輯器在index.html中，默認引用的是壓縮過的 ueditor.all.min.js，為了便于修改和重構，我們將引用ueditor.all.js，它們的功能是完全一樣的。

將：<script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>改為：<script type="text/javascript" charset="utf-8" src="ueditor.all.js"> </script>

在瀏覽器中打開index.html文件，效果如下：

由于UEditor編輯器的相關媒體素材上傳功能需要后端的支特，所以要在對應（Php、Jsp、Asp）的服務環境中運行，為了演示我這里是直接在本地打開的，所以在控制臺中會有報錯，不過這不會影響我們這次添加自定義按扭的功能【如果要正式上線用一定要配置好后端服務器環境哦】。

實現方式一（在外部js文件中新增自定義按扭）：

1、在index.html入口文件中添加以下代碼，為了便于理解，這里用newbtn為命名

新增按扭JS代碼如下： 

// 往UEditor編輯頭部工具欄中添加一個自定義名為 newbtn 的功能按扭UE.registerUI('newbtn', function (editor, uiName) {return new UE.ui.Button({name: uiName,title: '我是新增按扭的提示文字',  // 這里是設置當鼠標指向這個按扭時顯示的文字onclick: function () {alert('我是新增按扭在被點擊時執行的方法，在這里可以編寫你想要實現的功能哦！');}});}, [1, ['editor']]);

新增按扭代碼后以效果如下：

OK 這樣就在UEditor編輯器  的 工具欄上新添加了一個自定義的按扭。

鼠標指向該按扭：會顯示上面之前在title:屬性中設置文字提示！

鼠標點擊該按扭：還會彈出之前在onclick 回調函數中 alert() 的文字信息！

怎么樣簡單吧！

2、修改新增按扭的icon圖標（由于UEditor編輯器工具欄的 icon圖標中 B 是排在最左上角的，所以默認就顯示了B樣式的icon）,

這個icons.png的圖片路徑在 themes / default / images 目錄中！

要給我們剛新添加的這個按扭換icon有兩種方式：

2.1、在原有的icons.png圖片中添加一個icon，可用PS等設計軟件實現，然后打開themes / default / css 目錄下的 ueditor.css 樣式文件，添加一個 和 新增按扭時設置的名字一樣的類名，所以這里就用 .edui-for-newbtn 。

效果如下：

2.2、單獨用一個icon圖片來顯示，做法和上面相似：

a、先設計好、或找好icon圖片，存放到 themes / default / images目錄中，名字最好和對應的按扭名相同，所以這里就用newbtn。

b、打開themes / default / css 目錄下的 ueditor.css 樣式文件，添加和新增按扭名對應的樣式類。

修改新增按扭icon圖標CSS樣式代碼：

/* 注：類名一定要和新增按扭時配置的名字一樣 */.edui-default .edui-for-newbtn .edui-icon {/* 這里就根據你設置好icon的位置進行調整 *//* background-position: -60px -20px;  *//* 注：這里獨立的一張icon圖片(不是在icons.png CSS雪碧圖圖中的哦！) */background: url("../images/newbtn.png") no-repeat center !important;background-size: 16px auto;}

實現方式二（在編輯器原碼中新增自定義按扭）：

1、先打開ueditor.config.js文件，找到 toolbars 數組變量，在數組的最后添加一個自定義按扭名（注：這里的順序根顯示的順序是相關的，因為ueditor編輯器是正向遍歷頭部工具樣按扭的，在toolbars數組的最后添加，在頭部工具欄中也是在最后顯示），為了便于理解，這里用newbtn為命名：

2、找到lang目錄下的zh-cn/zh-cn.js 中找到labelMap對象，并添加與新增按扭名(newbtn)對應的中文名，主要是用于鼠標放置上去顯示的文字提示內容

3、在ueditor.all.js  中搜索到"btnCmds" ,在數組的最后添加"newbtn"。

下次更新。。。

原諒來源：https://blog.csdn.net/muguli2008/article/details/105639221