自從用上WordPress以來(lái)我不知道換了多少個(gè)后臺(tái)編輯器了，從FCKEditor到CKeditor，甚至還有一些名不見(jiàn)經(jīng)傳的 CodeRenderUnmi和WLW、FE editor等等，用來(lái)用去發(fā)現(xiàn)有些功能確實(shí)強(qiáng)大，但是要想用著順手就必須修改很多東西，而且一旦WordPress或者插件本身自己升級(jí)，那些修改過(guò)的 東西就必須重新再設(shè)置一遍，相當(dāng)麻煩；要不就是一些離線的編輯器，復(fù)制來(lái)粘貼去的也很費(fèi)心。到現(xiàn)在，我依然覺(jué)得，WordPress自帶的編輯器才是最強(qiáng) 大且實(shí)用的！

正所謂“自此精修，漸進(jìn)于無(wú)劍勝有劍之境”，拋開(kāi)那些個(gè)浮夸的編輯器，回到WordPress自帶的TinyMCE編輯器上來(lái)，要知 道，WordPress自身也在不斷的強(qiáng)大，每一次升級(jí)對(duì)自帶編輯器的改動(dòng)都是很實(shí)用的，不僅將多媒體功能融合到了一起，而且給人的感覺(jué)是越來(lái)越干凈利 落，從此我們也可以看到官方對(duì)自帶編輯器TinyMCE的重視程度。下面我將我自己對(duì)自帶編輯器TinyMCE的修改方法貼出來(lái)，所有代碼只需寫(xiě)到主題里 的functions.php文件里，即使日后升級(jí)WordPress也不需要重復(fù)操作。

更改編輯器默認(rèn)視圖為HTML

大家都知道，在后臺(tái)新建文章后，編輯器就自動(dòng)跳轉(zhuǎn)到“可視化”視圖，對(duì)于一些經(jīng)常要插入代碼或者WEB設(shè)計(jì)者們來(lái)說(shuō)（我就是^_^），可能更習(xí)慣使 用HTML視圖手動(dòng)編輯。而且，像CKEditor在可視化視圖下編輯本來(lái)沒(méi)有<p>或<div>標(biāo)簽，但切換到HTML視圖之 后就會(huì)自動(dòng)添加，當(dāng)然這是CKEditor的自動(dòng)設(shè)置無(wú)可厚非，但是在日后想要重新編輯一篇發(fā)表過(guò)的文章時(shí)就會(huì)頭疼了，因?yàn)镃KEditor會(huì)自作多情的 生成很多冗雜或混亂的代碼，保持代碼的干凈整潔非常不便（當(dāng)然你要想湊合著用也不會(huì)對(duì)實(shí)際顯示效果有很大改變，但會(huì)對(duì)網(wǎng)頁(yè)結(jié)構(gòu)減分）。

設(shè)置方法：將以下代碼添加到主題的functions.php文件里即可：

add_filter('wp_default_editor', create_function('','return "html";'));

添加編輯器默認(rèn)內(nèi)容（編輯器內(nèi)可見(jiàn)）

新建文章后編輯器里的內(nèi)容默認(rèn)是空的，有些朋友做的是WordPress主題站、插件站或單純的下載站，一些標(biāo)準(zhǔn)的格式化的文章每次都會(huì)輸入“主題 名稱”、“主題作者”、“下載地址”等內(nèi)容，添加默認(rèn)內(nèi)容之后，這些重復(fù)性的工作以后再也不用了，一切都預(yù)定義好了。而且如果發(fā)表文章不需要這些預(yù)定義的 內(nèi)容，只需要全選-Delete就ok了，并不會(huì)很麻煩。

設(shè)置方法：在主題functions.php文件添加以下代碼即可：

function insertPreContent($content) {

if(!is_feed() && !is_home()) {

$content.= "<div class='wpohome'>";

$content.= "<h4>WordPress網(wǎng)站優(yōu)化之家</h4>";

$content.= "這里的預(yù)定義內(nèi)容在編輯器可見(jiàn)<a href='http://www.***.com'>WordPress網(wǎng)站優(yōu)化之家</a>";

$content.= "</div>";

}

return $content;

}

add_filter ('default_content', 'insertPreContent');

添加編輯器默認(rèn)內(nèi)容（編輯時(shí)不可見(jiàn)）

此方法添加的內(nèi)容在發(fā)布文章時(shí)自動(dòng)添加在內(nèi)容的最后，在編輯的時(shí)候是看不見(jiàn)的，用于添加訂閱、文章版權(quán)信息等等。

設(shè)置方法：在主題functions.php文件添加以下代碼即可：

function insertFootNote($content) {

if(!is_feed() && !is_home()) {

$content.= "<div class='wpohome'>";

$content.= "<h4>WordPress網(wǎng)站優(yōu)化之家</h4>";

$content.= "這里的預(yù)定義內(nèi)容在編輯器可見(jiàn)<a href='http://www.***.com'>WordPress網(wǎng)站優(yōu)化之家</a>";

$content.= "</div>";

}

return $content;

}

add_filter ('the_content', 'insertFootNote');

添加更多的HTML標(biāo)簽（慎用）

此功能請(qǐng)慎用，因?yàn)閃ordPress自帶的TinyMCE編輯器會(huì)默認(rèn)過(guò)濾掉不符合XHTML 1.0中的html標(biāo)簽，如《br /》、《iframe》等。但不排除某些情況下也可能會(huì)用到這些標(biāo)簽，所以把方法放出來(lái)供大家參考吧。

添加方法：將以下代碼粘貼到主題的functions.php文件里即可：

function fb_change_mce_options($initArray) {

$ext ='pre[id|name|class|style],iframe[align|longdesc|

name|width|height|frameborder|scrolling|marginheight|

marginwidth|src]'; //注意：格式為“標(biāo)簽一［屬性一|屬性二］，標(biāo)簽二［屬性一|屬性二|屬性三］”

if ( isset( $initArray['extended_valid_elements'])) {

$initArray['extended_valid_elements'].= ','. $ext;

} else {

$initArray['extended_valid_elements'] = $ext;

}

return $initArray;

}

add_filter('tiny_mce_before_init','fb_change_mce_options');

顯示編輯器中的隱藏按鈕

WordPress自帶編輯器的強(qiáng)大往往被人忽略，很大程度上就是其隱藏的編輯按鈕默認(rèn)情況下沒(méi)有被顯示出來(lái)而已。完整的編輯器其實(shí)包含這些功能： 加粗（bold）、斜體（italic）、下劃線（underline）、刪除線（strikethrough）、左對(duì)齊（justifyleft）、居 中（justifycenter）、右對(duì)齊（justfyright）、兩端對(duì)齊（justfyfull）、無(wú)序列表（bullist）、編號(hào)列表 （numlist）、減少縮進(jìn)（outdent）、縮進(jìn)（indent）、剪切（cut）、復(fù)制（copy）、粘貼（paste）、撤銷（undo）、重 做（redo）、插入超鏈接（link）、取消超鏈接（unlink）、插入圖片（image）、清除格式（removeformat）、幫助 （wp_help）、打開(kāi)HTML代碼編輯器（code）、水平線（hr）、清除冗余代碼（cleanup）、格式選擇（formmatselect）、 字體選擇（fontselect）、字號(hào)選擇（fontsizeselect）、樣式選擇（styleselect）、上標(biāo)（sub）、下標(biāo)（sup）、 字體顏色（forecolor）、字體背景色（backcolor）、特殊符號(hào)（charmap）、隱藏按鈕顯示開(kāi)關(guān)（wp_adv）、隱藏按鈕區(qū)起始部 分（wp_adv_start）、隱藏按鈕區(qū)結(jié)束部分（wp_adv_end）、錨文本（anchor）、新建文本（類似于清空文本） （newdocument）、插入more標(biāo)簽（wp_more）、插入分頁(yè)標(biāo)簽（wp_page）、拼寫(xiě)檢查（spellchecker）。下面就把這 些功能掉出來(lái)吧！效果圖：

WordPress自帶TinyMCE編輯器隱藏按鈕

調(diào)用方式：將以下代碼添加到主題functions.php文件里即可：

function enable_more_buttons($buttons) {

$buttons[] = 'hr';

$buttons[] = 'fontselect';

$buttons[] = 'sup';

$buttons[]= 'del';

$buttons[] = 'fontselect';

$buttons[] = 'cleanup';

$buttons[] = 'styleselect';

// 更多按鈕自行添加吧。

return $buttons;

}

add_filter("mce_buttons", "enable_more_buttons"); //默認(rèn)將新添加的按鈕追加在工具欄的第一行

//add_filter("mce_buttons_2", "enable_more_buttons"); //添加到工具欄的第二行

//add_filter("mce_buttons_3", "enable_more_buttons"); //添加到工具欄的第三行

讓編輯器支持中文拼寫(xiě)檢查

WordPress自帶TinyMCE編輯器默認(rèn)對(duì)英文拼寫(xiě)進(jìn)行檢查，怎么樣才能讓其支持中文拼寫(xiě)檢查呢？

設(shè)置方法：在主題的functions.php文件里添加如下代碼即可：

function fb_mce_external_languages($initArray){

$initArray['spellchecker_languages'] = '+Chinese=zh,

English=en';

return $initArray;

}

add_filter('tiny_mce_before_init','fb_mce_external_languages');

簡(jiǎn)單添加自定義按鈕

如果你使用了WordPress3.3.0最新版，可以用以下方法快捷方便的在后臺(tái)HTML編輯器中加入自定義按鈕。效果圖：

WordPress自帶TinyMCE編輯器自定義按鈕

步驟一：首先創(chuàng)建一個(gè)js文件，粘貼如下代碼并保存為my_quicktags.js文件：

QTags.addButton('QTags.addButton('hr', 'hr', "n<hr />n",''); //快捷輸入一個(gè)hr橫線，點(diǎn)一下即可

QTags.addButton('h1','h1', "n<h1>", "</h1>n"); //快捷輸入h1標(biāo)簽

QTags.addButton('1', '【php】', "n【php】nn【/php】", "");//我就是將SyntaxHighlighter Evolved插件的簡(jiǎn)碼集成到工具欄，這樣就方便多了^_^，不過(guò)記得將【】換成［］。

QTags.addButton('【css】', '【css】', "n【css】nn【/css】", "");//當(dāng)然你也可以集成其他代碼高亮或插件的簡(jiǎn)碼^_^

//QTags.addButton('my_id', 'my button', 'n', 'n');

//這兒共有四對(duì)引號(hào)，分別是按鈕的ID、顯示名、點(diǎn)一下輸入內(nèi)容、再點(diǎn)一下關(guān)閉內(nèi)容（此為空則一次輸入全部?jī)?nèi)容），n表示換行。

步驟二：把剛才寫(xiě)好的my_quicktags.js放在主題文件夾，再在主題 functions.php 中加入代碼：

add_action('admin_print_scripts', 'my_quicktags');

function my_quicktags() {

wp_enqueue_script(

'my_quicktags',

get_stylesheet_directory_uri().'/my-quicktags.js',

array('quicktags')

);

}

好了，再去HTML編輯器看看吧，是不是很方便呢？

你還有其他好的WordPress自帶TinyMCE編輯器的使用技巧嗎？歡迎留言交流！

更多信息請(qǐng)查看IT技術(shù)專欄