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

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

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

這是一個(gè)綠色提示框

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

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

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

前期準(zhǔn)備

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');

這個(gè)短代碼的作用是，在編輯器中輸入如下短代碼后，在前臺打開文章時(shí)，會把這些短代碼變?yōu)樯厦嫖覀兌x的blockquote標(biāo)簽：

編輯器中的短代碼

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個(gè)圖標(biāo)鏈接，請將鏈接改為你保存的位置

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

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

UEditor添加按鈕

本文參考：

百度UEditor官方-UEditor二次開發(fā)-增加一個(gè)普通按鈕（上）（下）

百度UEditor官方-API文檔

第一步:添加按鈕位置

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

第一步:添加按鈕位置

第二步：注冊按鈕實(shí)例

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

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"

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

第二步：注冊按鈕實(shí)例

這時(shí)候清空緩存刷新下頁面，看看工具欄的對應(yīng)位置是否出現(xiàn)了四個(gè)個(gè)自己定義的按鈕呢？如下圖所示：

新增的4個(gè)按鈕

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

第三步：更改圖標(biāo)

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

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

完成后刷新瀏覽器，可以看到此時(shí)第一個(gè)圖標(biāo)已經(jīng)顯示為如下圖所示：

第三步-修改圖標(biāo)

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

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

icon圖標(biāo)文件

對應(yīng)的，在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;
}

這時(shí)候，重新刷新瀏覽器，應(yīng)該就可以看到如下效果了：

更改圖標(biāo)的最終效果

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

到此為止，在UI層面已經(jīng)完成了一個(gè)工具欄圖標(biāo)的顯示，但是我們發(fā)現(xiàn)點(diǎn)擊按鈕之后毫無反應(yīng)。那是必然的，我們還必須為該按鈕綁定屬于它自己的事件處理方法。

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

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

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

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+'
');}
    }
};

添加后代碼中如下圖：

定義按鈕事件處理方法

這時(shí)候刷新瀏覽器，點(diǎn)擊按鈕，應(yīng)該可以看到以下效果（圖中先森是手動換行）：

按鈕功能效果

代碼解釋：

UE.commands['v_notice']

這個(gè)表示注冊一個(gè)命令。

execCommand : function(){}

execCommand是UEditor執(zhí)行命令的通用接口。

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

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

因?yàn)樘砑恿诉@個(gè)命令，所以使用按鈕的時(shí)候，可以先將文字寫好，然后選中后點(diǎn)擊按鈕。但遺憾的是選中的文字只能是純文本，如果有鏈接或其他樣式，選中后點(diǎn)擊按鈕也會變成純文字。

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

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

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

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

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

第五步：添加鼠標(biāo)移上按鈕時(shí)的提示

其實(shí)到此為止，給UEditor添加按鈕的功能已經(jīng)完全實(shí)現(xiàn)了，但是我們還缺少一個(gè)不是那么重要的功能，也就是當(dāng)鼠標(biāo)移到按鈕上的時(shí)候給出的提示。

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

打開/wp-content/plugins/ueditor/ueditor/lang/zh-cn目錄，打開zh-cn.js文件。在labelMap數(shù)組中添加4個(gè)對應(yīng)提示：

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

添加后zh-cn.js內(nèi)代碼應(yīng)該如下圖：

添加鼠標(biāo)移上按鈕時(shí)的提示

到這里，給WordPress版UEditor編輯器增加四個(gè)彩色美化框自定義按鈕就完全實(shí)現(xiàn)了。

修改版下載

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

百度云網(wǎng)盤下載：

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

寫在最后

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

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

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

歷史上的今天:

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