WordPress TinyMCE 編輯器增強技巧大全

說到WordPress自帶的TinyMCE 編輯器，有些國人總是不太滿意。針對這個情況，倡萌已經(jīng)介紹了一些增強或替代的方法：

• WordPress編輯器增強插件：TinyMCE Advanced
• WordPress編輯器插件：Kindeditor for WordPress
• WordPress編輯器插件：CKEditor for WordPress

今天再補充一些 TinyMCE 編輯器增強技巧，希望能盡可能滿足你自己的折騰需求。

更改編輯器默認視圖為HTML

大家都知道，在后臺新建文章后，編輯器就自動跳轉(zhuǎn)到“可視化”視圖，對于一些經(jīng)常要插入代碼或者WEB設(shè)計者們來說，可能更習慣使用HTML視圖手動編輯。

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

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

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

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

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

function insertPreContent($content) {
        if(!is_feed() && !is_home()) {
 $content.= "這里的預(yù)定義內(nèi)容在編輯器可見";
        }
        return $content;
}
add_filter ('default_content', 'insertPreContent');

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

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

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

function insertFootNote($content) {
        if(!is_feed() && !is_home()) {
 $content.= "這里的預(yù)定義內(nèi)容在編輯器不可見";
        }
        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）、復(fù)制（copy）、粘貼（paste）、撤銷（undo）、重做（redo）、插入超鏈接（link）、取消超鏈接（unlink）、插入圖片（image）、清除格式（removeformat）、幫助（wp_help）、打開HTML代碼編輯器（code）、水平線（hr）、清除冗余代碼（cleanup）、格式選擇（formmatselect）、字體選擇（fontselect）、字號選擇（fontsizeselect）、樣式選擇（styleselect）、上標（sub）、下標（sup）、字體顏色（forecolor）、字體背景色（backcolor）、特殊符號（charmap）、隱藏按鈕顯示開關(guān)（wp_adv）、隱藏按鈕區(qū)起始部分（wp_adv_start）、隱藏按鈕區(qū)結(jié)束部分（wp_adv_end）、錨文本（anchor）、新建文本（類似于清空文本）（newdocument）、插入more標簽（wp_more）、插入分頁標簽（wp_page）、拼寫檢查（spellchecker）。

下面就把這些功能調(diào)出來吧！效果圖：

調(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"); //默認將新添加的按鈕追加在工具欄的第一行
//add_filter("mce_buttons_2", "enable_more_buttons");  //添加到工具欄的第二行
//add_filter("mce_buttons_3", "enable_more_buttons");  //添加到工具欄的第三行

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

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

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

簡單添加自定義按鈕

如果你使用了 WordPress3.0以上的版本，可以用以下方法快捷方便的在后臺HTML編輯器中加入自定義按鈕。效果圖：

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

QTags.addButton( 'hr', 'hr', 'n<hr />n', '' ); //快捷輸入一個hr橫線，點一下即可
QTags.addButton( 'h1', 'h1', 'n<h1>', '</h1>n' ); //快捷輸入h1標簽
//QTags.addButton( 'my_id', 'my button', 'n', 'n' );
//這兒共有四對引號，分別是按鈕的ID、顯示名、點一下輸入內(nèi)容、再點一下關(guān)閉內(nèi)容（此為空則一次輸入全部內(nèi)容），n表示換行。

步驟二：把剛才寫好的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')
    );
    }

關(guān)于quicktags的更多參數(shù)(比如 按鈕的提示)，你可以查看 http://codex.wordpress.org/Quicktags_API