自從用上WordPress以來我不知道換了多少個后臺編輯器了，從FCKEditor到CKeditor，甚至還有一些名不見經(jīng)傳的 CodeRenderUnmi和WLW、FE editor等等，用來用去發(fā)現(xiàn)有些功能確實強大，但是要想用著順手就必須修改很多東西，而且一旦WordPress或者插件本身自己升級，那些修改過的 東西就必須重新再設置一遍，相當麻煩；要不就是一些離線的編輯器，復制來粘貼去的也很費心。到現(xiàn)在，我依然覺得，WordPress自帶的編輯器才是最強 大且實用的！
正所謂“自此精修，漸進于無劍勝有劍之境”，拋開那些個浮夸的編輯器，回到WordPress自帶的TinyMCE編輯器上來，要知 道，WordPress自身也在不斷的強大，每一次升級對自帶編輯器的改動都是很實用的，不僅將多媒體功能融合到了一起，而且給人的感覺是越來越干凈利 落，從此我們也可以看到官方對自帶編輯器TinyMCE的重視程度。下面我將我自己對自帶編輯器TinyMCE的修改方法貼出來，所有代碼只需寫到主題里 的functions.php文件里，即使日后升級WordPress也不需要重復操作。
更改編輯器默認視圖為HTML
大家都知道，在后臺新建文章后，編輯器就自動跳轉(zhuǎn)到“可視化”視圖，對于一些經(jīng)常要插入代碼或者WEB設計者們來說（我就是^_^），可能更習慣使 用HTML視圖手動編輯。而且，像CKEditor在可視化視圖下編輯本來沒有<p>或<div>標簽，但切換到HTML視圖之 后就會自動添加，當然這是CKEditor的自動設置無可厚非，但是在日后想要重新編輯一篇發(fā)表過的文章時就會頭疼了，因為CKEditor會自作多情的 生成很多冗雜或混亂的代碼，保持代碼的干凈整潔非常不便（當然你要想湊合著用也不會對實際顯示效果有很大改變，但會對網(wǎng)頁結(jié)構(gòu)減分）。
設置方法：將以下代碼添加到主題的functions.php文件里即可：
add_filter('wp_default_editor', create_function('','return "html";'));
添加編輯器默認內(nèi)容（編輯器內(nèi)可見）
新建文章后編輯器里的內(nèi)容默認是空的，有些朋友做的是WordPress主題站、插件站或單純的下載站，一些標準的格式化的文章每次都會輸入“主題 名稱”、“主題作者”、“下載地址”等內(nèi)容，添加默認內(nèi)容之后，這些重復性的工作以后再也不用了，一切都預定義好了。而且如果發(fā)表文章不需要這些預定義的 內(nèi)容，只需要全選-Delete就ok了，并不會很麻煩。
設置方法：在主題functions.php文件添加以下代碼即可：
function insertPreContent($content) {
if(!is_feed() && !is_home()) {
$content.= "<div class='wpohome'>";
$content.= "<h4>WordPress網(wǎng)站優(yōu)化之家</h4>";
$content.= "這里的預定義內(nèi)容在編輯器可見<a href='http://www.***.com'>WordPress網(wǎng)站優(yōu)化之家</a>";
$content.= "</div>";
}
return $content;
}
add_filter ('default_content', 'insertPreContent');
添加編輯器默認內(nèi)容（編輯時不可見）
此方法添加的內(nèi)容在發(fā)布文章時自動添加在內(nèi)容的最后，在編輯的時候是看不見的，用于添加訂閱、文章版權(quán)信息等等。
設置方法：在主題functions.php文件添加以下代碼即可：
function insertFootNote($content) {
if(!is_feed() && !is_home()) {
$content.= "<div class='wpohome'>";
$content.= "<h4>WordPress網(wǎng)站優(yōu)化之家</h4>";
$content.= "這里的預定義內(nèi)容在編輯器可見<a href='http://www.***.com'>WordPress網(wǎng)站優(yōu)化之家</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）、隱藏按鈕顯示開關(guān)（wp_adv）、隱藏按鈕區(qū)起始部 分（wp_adv_start）、隱藏按鈕區(qū)結(jié)束部分（wp_adv_end）、錨文本（anchor）、新建文本（類似于清空文本） （newdocument）、插入more標簽（wp_more）、插入分頁標簽（wp_page）、拼寫檢查（spellchecker）。下面就把這 些功能掉出來吧！效果圖：
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"); //默認將新添加的按鈕追加在工具欄的第一行
//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');
簡單添加自定義按鈕
如果你使用了WordPress3.3.0最新版，可以用以下方法快捷方便的在后臺HTML編輯器中加入自定義按鈕。效果圖：
WordPress自帶TinyMCE編輯器自定義按鈕
步驟一：首先創(chuàng)建一個js文件，粘貼如下代碼并保存為my_quicktags.js文件：
QTags.addButton('QTags.addButton('hr', 'hr', "n<hr />n",''); //快捷輸入一個hr橫線，點一下即可
QTags.addButton('h1','h1', "n<h1>", "</h1>n"); //快捷輸入h1標簽
QTags.addButton('1', '【php】', "n【php】nn【/php】", "");//我就是將SyntaxHighlighter Evolved插件的簡碼集成到工具欄，這樣就方便多了^_^，不過記得將【】換成［］。
QTags.addButton('【css】', '【css】', "n【css】nn【/css】", "");//當然你也可以集成其他代碼高亮或插件的簡碼^_^
//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')
);
}
好了，再去HTML編輯器看看吧，是不是很方便呢？
你還有其他好的WordPress自帶TinyMCE編輯器的使用技巧嗎？歡迎留言交流！
更多信息請查看IT技術(shù)專欄
版權(quán)所有:易賢網(wǎng)
公眾號
事業(yè)單位
當前位置：
公考類
招聘類
各類考試