WordPress TinyMCE 編輯器增強技巧大全

本文目錄1更改編輯器默認視圖為HTML2添加編輯器默認內容（編輯器內可見）3添加編輯器默認內容（編輯時不可見）4添加更多的HTML標簽5讓編輯器支援中文拼寫檢查6簡單添加自定義按鈕

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

WordPress編輯器增強外掛：TinyMCE AdvancedWordPress編輯器外掛：Kindeditor for WordPressWordPress編輯器外掛：CKEditor for WordPress

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

更改編輯器默認視圖為HTML

大傢都知道，在後臺新建文章後，編輯器就自動跳轉到“可視化”視圖，對於一些經常要插入代碼或者WEB設計者們來說，可能更習慣使用HTML視圖手動編輯。

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

1

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

add_filter(‘wp_default_editor’, create_function(”, ‘return "html";’));

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

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

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

1
2
3
4
5
6
7

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

function insertPreContent($content) {
if(!is_feed() && !is_home()) {
$content.= "這裡的預定義內容在編輯器可見";
}
return $content;
}
add_filter (‘default_content’, ‘insertPreContent’);

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

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

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

1
2
3
4
5
6
7

function insertFootNote($content) {
        if(!is_feed() && !is_home()) {
 $content.= "這裡的預定義內容在編輯器不可見";
        }
        return $content;
}
add_filter ('the_content', 'insertFootNote');

function insertFootNote($content) {
if(!is_feed() && !is_home()) {
$content.= "這裡的預定義內容在編輯器不可見";
}
return $content;
}
add_filter (‘the_content’, ‘insertFootNote’);

添加更多的HTML標簽

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

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

1
2
3
4
5
6
7
8
9
10
11
12

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

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）。

下面就把這些功能調出來吧！效果圖：

調用方式：將以下代碼添加到主題functions.php文件裡即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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");  //添加到工具欄的第三行

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文件裡添加如下代碼即可：

1
2
3
4
5
6
7

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

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編輯器中加入自定義按鈕。效果圖：

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

1
2
3
4

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表示換行。

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表示換行。

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

1
2
3
4
5
6
7
8

add_action('admin_print_scripts', 'my_quicktags');
function my_quicktags() {
    wp_enqueue_script(
        'my_quicktags',
        get_stylesheet_directory_uri().'/my_quicktags.js',
        array('quicktags')
    );
    }

add_action(‘admin_print_scripts’, ‘my_quicktags’);
function my_quicktags() {
wp_enqueue_script(
‘my_quicktags’,
get_stylesheet_directory_uri().’/my_quicktags.js’,
array(‘quicktags’)
);
}

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