添加一個名叫“macros”的普通按鈕在工具欄上：

第一步：找到ueditor.config.js文件中的toolbars數(shù)組，增加一個“macros”字符串，

然后找到labelMap數(shù)組，對應(yīng)著添加一個labelMap，用于鼠標(biāo)移上按鈕時的提示。

第二步：找到你所引用的ueditor.all.js文件中的btnCmds數(shù)組，在其中同樣增加一個“macros”字符串。

第三步：清空緩存或刷新，工具欄的對應(yīng)位置是否出現(xiàn)了一個自己定義的按鈕呢

由于此時未設(shè)置對應(yīng)按鈕的圖片樣式，所以會顯示默認(rèn)的“B”字符。要想讓其顯示成自己需要的圖標(biāo)樣式，接著按照下面的步驟動手吧。

第四步：找到themes/default/css/ueditor.css文件，增加一條樣式定義:

.edui-for-macros .edui-icon {    background-position: -680px -40px;}

此處的樣式定義了showmsg圖標(biāo)在UEditor默認(rèn)的精靈Icon圖片（themes/default/images/icons.png）中的位置偏移。如需更改成另外圖標(biāo)，只需添加圖標(biāo)到該圖片文件中，然后設(shè)置偏移值即可。

第五步：到此為止，在UI層面已經(jīng)完成了一個工具欄圖標(biāo)的顯示和各種狀態(tài)變化的邏輯，但是我們發(fā)現(xiàn)點擊按鈕之后毫無反應(yīng)。那是必然的，我們還必須為該按鈕綁定屬于它自己的事件處理方法。

實質(zhì)上，此時一個默認(rèn)的事件處理方法已經(jīng)被UEditor綁定到按鈕上了，只不過由于我們還沒有定義該方法的具體內(nèi)容，所以點擊之后無任何變化。

下面我們就來定義該方法的具體內(nèi)容：

在初始化編輯器的時候，加上自己的事件處理（插入一張圖片），如下代碼：

var ue = UE.getEditor('editor');
ue.commands['macros'] = {
          execCommand: function() {
            this.execCommand('insertHtml', "<img src='https://www.baidu.com/img/bd_logo1.png' />");
            return true;
          },
          queryCommandState: function() { }
        };

exec:function () {
    this.execCommand('insertHtml', "<input type='button' class='M_scrawl' value='聯(lián)系人稱謂'>");
    return true;
}