自從用上 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 編輯器的使用技巧嗎？歡迎留言交流！