自從用上 WordPress 以來我不知道換了多少個後台編輯器了，從 FCKEditor 到 CKeditor，甚至還有一些名不見經傳的 CodeRenderUnmi 和 WLW 、 FE editor 等等，用來用去發現有些功能確實強大，但是要想用着順手就必須修改很多東西，而且一旦 WordPress 或者插件本身自己升級，那些修改過的東西就必須重新再設置一遍，相當麻煩；要不就是一些離線的編輯器，複製來粘貼去的也很費心。到現在，我依然覺得，WordPress 自帶的編輯器才是最強大且實用的！

正所謂 「自此精修，漸進於無劍勝有劍之境」，拋開那些個浮誇的編輯器，回到 WordPress 自帶的 TinyMCE 編輯器上來，要知道，WordPress 自身也在不斷的強大，每一次升級對自帶編輯器的改動都是很實用的，不僅將多媒體功能融合到了一起，而且給人的感覺是越來越乾淨利落，從此我們也可以看到官方對自帶編輯器 TinyMCE 的重視程度。下面我將我自己對自帶編輯器 TinyMCE 的修改方法貼出來，所有代碼只需寫到主題裏的 functions.php 文件裏，即使日後升級 WordPress 也不需要重複操作。

更改編輯器默認視圖為 HTML

大家都知道，在後台新建文章後，編輯器就自動跳轉到 「可視化」 視圖，對於一些經常要插入代碼或者 WEB 設計者們來説 （我就是^_^），可能更習慣使用 HTML 視圖手動編輯。而且，像 CKEditor 在可視化視圖下編輯本來沒有<p> 或<div> 標籤，但切換到 HTML 視圖之後就會自動添加，當然這是 CKEditor 的自動設置無可厚非，但是在日後想要重新編輯一篇發表過的文章時就會頭疼了，因為 CKEditor 會自作多情的生成很多冗雜或混亂的代碼，保持代碼的乾淨整潔非常不便 （當然你要想湊合着用也不會對實際顯示效果有很大改變，但會對網頁結構減分） 。

設置方法：將以下代碼添加到主題的 functions.php 文件裏即可：

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

添加編輯器默認內容 （編輯器內可見）

新建文章後編輯器裏的內容默認是空的，有些朋友做的是 WordPress 主題站、插件站或單純的下載站，一些標準的格式化的文章每次都會輸入 「主題名稱」 、 「主題作者」 、 「下載地址」 等內容，添加默認內容之後，這些重複性的工作以後再也不用了，一切都預定義好了。而且如果發表文章不需要這些預定義的內容，只需要全選-Delete 就 ok 了，並不會很麻煩。

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

function insertPreContent($content) {

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

$content.= "<div >";

$content.= "<h4>WordPress 網站優化之家</h4>";

$content.= "這裏的預定義內容在編輯器可見<a href='http://www.***.com'>WordPress 網站優化之家</a>";

$content.= "</div>";

}

return $content;

}

add_filter ('default_content', 'insertPreContent');

添加編輯器默認內容 （編輯時不可見）

此方法添加的內容在發佈文章時自動添加在內容的最後，在編輯的時候是看不見的，用於添加訂閲、文章版權信息等等。

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

function insertFootNote($content) {

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

$content.= "<div >";

$content.= "<h4>WordPress 網站優化之家</h4>";

$content.= "這裏的預定義內容在編輯器可見<a href='http://www.***.com'>WordPress 網站優化之家</a>";

$content.= "</div>";

}

return $content;

}

add_filter ('the_content', 'insertFootNote');

添加更多的 HTML 標籤 （慎用）

此功能請慎用，因為 WordPress 自帶的 TinyMCE 編輯器會默認過濾掉不符合 XHTML 1.0 中的 html 標籤，如 《br /》 、 《iframe 》等。但不排除某些情況下也可能會用到這些標籤，所以把方法放出來供大家參考吧。

添加方法：將以下代碼粘貼到主題的 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]'; //注意：格式為 「標籤一 ［屬性一|屬性二］，標籤二 ［屬性一|屬性二|屬性三］」

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 自帶編輯器的強大往往被人忽略，很大程度上就是其隱藏的編輯按鈕默認情況下沒有被顯示出來而已。完整的編輯器其實包含這些功能：加粗 （bold） 、斜體 （italic） 、下劃線 （underline） 、刪除線 （strikethrough） 、左對齊 （justifyleft） 、居中 （justifycenter） 、右對齊 （justfyright） 、兩端對齊 （justfyfull） 、無序列表 （bullist） 、編號列表 （numlist） 、減少縮進 （outdent） 、縮進 （indent） 、剪切 （cut） 、複製 （copy） 、粘貼 （paste） 、撤銷 （undo） 、重做 （redo） 、插入超鏈接 （link） 、取消超鏈接 （unlink） 、插入圖片 （image） 、清除格式 （removeformat） 、幫助 （wp_help） 、打開 HTML 代碼編輯器 （code） 、水平線 （hr） 、清除冗餘代碼 （cleanup） 、格式選擇 （formmatselect） 、字體選擇 （fontselect） 、字號選擇 （fontsizeselect） 、樣式選擇 （styleselect） 、上標 （sub） 、下標 （sup） 、字體顏色 （forecolor） 、字體背景色 （backcolor） 、特殊符號 （charmap） 、隱藏按鈕顯示開關 （wp_adv） 、隱藏按鈕區起始部分 （wp_adv_start） 、隱藏按鈕區結束部分 （wp_adv_end） 、錨文本 （anchor） 、新建文本 （類似於清空文本）（newdocument） 、插入 more 標籤 （wp_more） 、插入分頁標籤 （wp_page） 、拼寫檢查 （spellchecker） 。下面就把這些功能掉出來吧！效果圖：

WordPress 自帶 TinyMCE 編輯器隱藏按鈕

調用方式：將以下代碼添加到主題 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"); //默認將新添加的按鈕追加在工具欄的第一行

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

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

讓編輯器支持中文拼寫檢查

WordPress 自帶 TinyMCE 編輯器默認對英文拼寫進行檢查，怎麼樣才能讓其支持中文拼寫檢查呢？

設置方法：在主題的 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');

< strong> 簡單添加自定義按鈕

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

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

步驟一：首先創建一個 js 文件，粘貼如下代碼並保存為 my_quicktags.js 文件：

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

QTags.addButton('h1','h1', "
<h1>", "</h1>
"); //快捷輸入 h1 標籤

QTags.addButton('1', '【 php 】', "
【 php 】

【/php 】", "");//我就是將 SyntaxHighlighter Evolved 插件的簡碼集成到工具欄，這樣就方便多了^_^，不過記得將 【】 換成 ［］ 。

QTags.addButton('【 css 】', '【 css 】', "
【 css 】

【/css 】", "");//當然你也可以集成其他代碼高亮或插件的簡碼^_^

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

//這兒共有四對引號，分別是按鈕的 ID 、顯示名、點一下輸入內容、再點一下關閉內容 （此為空則一次輸入全部內容），
表示換行。

步驟二：把剛才寫好的 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 編輯器的使用技巧嗎？歡迎留言交流！