給WordPress版UEditor編輯器增加四個彩色美化框自定義按鈕

編輯：狂族晨曦 來源：WordPress技巧 日期：2016-06-25 閱讀： 7,173 次 13 條評論 » 百度已收錄

其實本文著重介紹的不是彩色美化框，而是如何給百度UEditor編輯器增加自定義按鈕。關于什么是彩色美化框，看過先森前文《WordPress默認TinyMCE編輯器增加彩色美化框自定義按鈕》應該都知道的。其實也沒什么，也就是給引用來的文字段加一個更明顯的樣式，就像下面這樣。

這是一個綠色提示框

這種美化框，各位站長應該經常能見到，或許你也希望能給自己的WordPress上添加這種美化框。前文已經介紹過如何在WordPress默認的TinyMCE編輯器上添加，那么今天再來介紹下如何在百度UEditor編輯器上添加按鈕了。

注：本文中會增加4個按鈕，代表著4中顏色的美化框。

如果還沒有安裝百度UEditor編輯器，可以點擊下載百度UEditor編輯器插件1.4.3.1 For WordPress

前期準備

1.添加短代碼

編輯WordPress主題目錄下的functions.php文件，添加如下代碼并保存:

/*
*美化框的短代碼
*/
function toz($atts, $content=null){return '<blockquote id="sc_notice">'.$content.'</blockquote>'; }  
add_shortcode('v_notice','toz'); 
 
function toa($atts, $content=null){return '<blockquote id="sc_error">'.$content.'</blockquote>'; }  
add_shortcode('v_error','toa'); 
 
function toc($atts, $content=null){return '<blockquote id="sc_warn">'.$content.'</blockquote>'; }  
add_shortcode('v_warn','toc'); 
 
function tob($atts, $content=null){return '<blockquote id="sc_tips">'.$content.'</blockquote>'; }  
add_shortcode('v_tips','tob');

這個短代碼的作用是，在編輯器中輸入如下短代碼后，在前臺打開文章時，會把這些短代碼變為上面我們定義的blockquote標簽：

編輯器中的短代碼

2.CSS美化

將css代碼放入主題的style.css文件中或其他地方：

/*彩色美化框*/
#sc_notice { color: #7da33c; background: #ecf2d6 url('images/sc/sc_notice.png') -1px -1px no-repeat; border: 1px solid #aac66d; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px;width: 98%; }
#sc_warn, .post-password-form { color: #ad9948; background: #fff4b9 url('images/sc/sc_warn.png') -1px -1px no-repeat; border: 1px solid #eac946; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px;width: 98%; }
#sc_error { color: #c66; background: #ffecea url('images/sc/sc_error.png') -1px -1px no-repeat; border: 1px solid #ebb1b1; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px;width: 98%; }
#sc_tips {color: #7da33c;background: #ecf2d6 url('images/sc/sc_tips.png') -1px -1px no-repeat;border: 1px solid #aac66d;padding: 15px 15px 5px 35px;margin: 10px 0;width: 98%;overflow: hidden;}

CSS代碼中有4個圖標鏈接，請將鏈接改為你保存的位置

圖標素材下載：鏈接: http://pan.baidu.com/s/1bo3ziCB 密碼: chxs(成航先森)

只有前期準備是對WordPress主題的代碼添加，后面的步驟都是在UEditor編輯器插件的代碼修改了。

UEditor添加按鈕

本文參考：

百度UEditor官方-UEditor二次開發-增加一個普通按鈕（上）（下）

百度UEditor官方-API文檔

第一步:添加按鈕位置

在/wp-content/plugins/ueditor/ueditor目錄中，找到ueditor.config.js文件打開，找到ueditor.config.js文件中的toolbars參數，增加'v_notice', 'v_error', 'v_warn', 'v_tips'字符串，為了方便區分，我們可以在這四個字符串前加上一個'|'豎線。添加效果如圖：

第一步:添加按鈕位置

第二步：注冊按鈕實例

還是在/wp-content/plugins/ueditor/ueditor目錄中，找到ueditor.all.js文件打開，直接定位到大概第649行，有個數組如下：

e="undo redo formatmatch bold italic underline fontborder touppercase tolowercase strikethrough subscript superscript source indent outdent blockquote pasteplain pagebreak selectall print horizontal removeformat time date unlink insertparagraphbeforetable insertrow insertcol mergeright mergedown deleterow deletecol splittorows splittocols splittocells mergecells deletetable drafts"

在數組中的最后按格式添加第一步中的v_notice v_error v_warn v_tips四個字符串，添加效果如下：

第二步：注冊按鈕實例

這時候清空緩存刷新下頁面，看看工具欄的對應位置是否出現了四個個自己定義的按鈕呢？如下圖所示：

新增的4個按鈕

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

第三步：更改圖標

首先是更改圖標為默認圖標的方法。找到UEditor編輯器插件目錄中的themes/default/ueditor.css文件，末尾增加一條樣式定義:

.edui-for-v_notice .edui-icon {
    background-position: -700px -40px;
}

完成后刷新瀏覽器，可以看到此時第一個圖標已經顯示為如下圖所示：

第三步-修改圖標

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

先森已經將圖標添加到icons.png圖片中了（下圖右側），大家只需要將下圖用新窗口打開，去掉圖片鏈接后面的問號及參數另存，重命名后替換themes/default/images/icons.png圖片即可：

icon圖標文件

對應的，在themes/default/ueditor.css文件中添加的代碼如下：

.edui-for-v_notice .edui-icon {
    background-position: -830px 0px;
}
.edui-for-v_error .edui-icon {
    background-position: -830px -20px;
}
.edui-for-v_warn .edui-icon {
    background-position: -830px -40px;
}
.edui-for-v_tips .edui-icon {
    background-position: -850px 0px;
}

這時候，重新刷新瀏覽器，應該就可以看到如下效果了：

更改圖標的最終效果

第四步：定義按鈕事件處理方法

到此為止，在UI層面已經完成了一個工具欄圖標的顯示，但是我們發現點擊按鈕之后毫無反應。那是必然的，我們還必須為該按鈕綁定屬于它自己的事件處理方法。

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

下面我們就來定義該方法的具體內容：

再回到到ueditor.all.js文件，在521行（并不固定于521行，只要在其附近的一個分號后面另起一行即可）后另起一行，然后在該文件中輸入如下代碼：

UE.commands['v_notice'] = {
	execCommand : function(){
	var range = this.selection.getRange();
        range.select();
        var txt = this.selection.getText();
		if (txt == ''){this.execCommand('insertHtml','
綠色提示框：輸入文字
');}
		else{this.execCommand('insertHtml','
'+txt+'
');}
    }
};
UE.commands['v_error'] = {
	execCommand : function(){
	var range = this.selection.getRange();
        range.select();
        var txt = this.selection.getText();
		if (txt == ''){this.execCommand('insertHtml','
紅色提示框：輸入文字
');}
		else{this.execCommand('insertHtml','
'+txt+'
');}
    }
};
UE.commands['v_warn'] = {
	execCommand : function(){
	var range = this.selection.getRange();
        range.select();
        var txt = this.selection.getText();
		if (txt == ''){this.execCommand('insertHtml','
黃色提示框：輸入文字
');}
		else{this.execCommand('insertHtml','
'+txt+'
');}
    }
};
UE.commands['v_tips'] = {
	execCommand : function(){
	var range = this.selection.getRange();
        range.select();
        var txt = this.selection.getText();
		if (txt == ''){this.execCommand('insertHtml','
灰色提示框：輸入文字
');}
		else{this.execCommand('insertHtml','
'+txt+'
');}
    }
};

添加后代碼中如下圖：

定義按鈕事件處理方法

這時候刷新瀏覽器，點擊按鈕，應該可以看到以下效果（圖中先森是手動換行）：

按鈕功能效果

代碼解釋：

UE.commands['v_notice']

這個表示注冊一個命令。

execCommand : function(){}

execCommand是UEditor執行命令的通用接口。

var range = this.selection.getRange();
        range.select();
        var txt = this.selection.getText();

這一串是百度UEditor的ue.selection.getText();或者說是editor.selection.getText();命令的使用方法，其作用是獲得當前選中的文本。

因為添加了這個命令，所以使用按鈕的時候，可以先將文字寫好，然后選中后點擊按鈕。但遺憾的是選中的文字只能是純文本，如果有鏈接或其他樣式，選中后點擊按鈕也會變成純文字。

本來先森研究了半天也沒搞懂editor.selection.getText();命令的使用方法，還是要多謝平平深度文件搜索軟件，先森通過其深度搜索功能，在ueditor文件夾內搜索“selection.getText()”，這才找到了使用實例。

然后if和else是為了判斷是否選中了文本，最核心的其實就是下面這行代碼：

this.execCommand('insertHtml','
灰色提示框：輸入文字
');

這行代碼就是插入HTML代碼，代碼內容為“[ v_tips]灰色提示框：輸入文字[ /v_tips]”。

更多功能命令，請查看UEditor官方文檔和API文檔。

第五步：添加鼠標移上按鈕時的提示

其實到此為止，給UEditor添加按鈕的功能已經完全實現了，但是我們還缺少一個不是那么重要的功能，也就是當鼠標移到按鈕上的時候給出的提示。

在標準版本里面，其實第一步里面就已經可以添加提示了，但是WordPress for UEditor插件用的是zh-cn這種自動多語言配置，所以我們還需要在翻譯文件中添加提示語言。

打開/wp-content/plugins/ueditor/ueditor/lang/zh-cn目錄，打開zh-cn.js文件。在labelMap數組中添加4個對應提示：

'v_notice':'綠色提示框', 'v_error':'紅色提示框', 'v_warn':'黃色提示框', 'v_tips':'灰色提示框'

添加后zh-cn.js內代碼應該如下圖：

添加鼠標移上按鈕時的提示

到這里，給WordPress版UEditor編輯器增加四個彩色美化框自定義按鈕就完全實現了。

修改版下載

可能有些小伙伴看了上文已經頭大了，喜歡折騰的可以跟著折騰一番，如果實在不會折騰的，先森也把為寫本教程制作出來的WordPress版UEditor編輯器插件分享給大家：

百度云網盤下載：

鏈接: http://pan.baidu.com/s/1i5i4M4P 密碼: chxs（成航先森）

寫在最后

本文一是提供一個給UEditor編輯器添加按鈕的方法，而是添加彩色美化框的方法。

先森覺得，有了添加按鈕的方法最為重要，有了方法之后我們可以自定義更多方便的按鈕。先森接下來想做的就是添加下載鏈接的按鈕，讓前臺的下載鏈接顯得更美觀，不像上面那樣光禿禿的一個鏈接。

至于彩色美化框，先森覺得選中后會是鏈接什么的被過濾掉實在是個不小的BUG，所以希望未來能將其攻克，也希望有朋友能提供更好的代碼，先森的JavaScript實在太差。

歷史上的今天:

• 2015:  計算機工程系舉辦Point Your Love比賽(0)