WordPress自帶TinyMCE編輯器使用技巧大全

字號:


    自從用上WordPress以來我不知道換了多少個后臺編輯器了,從FCKEditor到CKeditor,甚至還有一些名不見經傳的 CodeRenderUnmi和WLW、FE editor等等,用來用去發(fā)現有些功能確實強大,但是要想用著順手就必須修改很多東西,而且一旦WordPress或者插件本身自己升級,那些修改過的 東西就必須重新再設置一遍,相當麻煩;要不就是一些離線的編輯器,復制來粘貼去的也很費心。到現在,我依然覺得,WordPress自帶的編輯器才是最強 大且實用的!
    正所謂“自此精修,漸進于無劍勝有劍之境”,拋開那些個浮夸的編輯器,回到WordPress自帶的TinyMCE編輯器上來,要知 道,WordPress自身也在不斷的強大,每一次升級對自帶編輯器的改動都是很實用的,不僅將多媒體功能融合到了一起,而且給人的感覺是越來越干凈利 落,從此我們也可以看到官方對自帶編輯器TinyMCE的重視程度。下面我將我自己對自帶編輯器TinyMCE的修改方法貼出來,所有代碼只需寫到主題里 的functions.php文件里,即使日后升級WordPress也不需要重復操作。
    更改編輯器默認視圖為HTML
    大家都知道,在后臺新建文章后,編輯器就自動跳轉到“可視化”視圖,對于一些經常要插入代碼或者WEB設計者們來說(我就是^_^),可能更習慣使 用HTML視圖手動編輯。而且,像CKEditor在可視化視圖下編輯本來沒有<p>或<div>標簽,但切換到HTML視圖之 后就會自動添加,當然這是CKEditor的自動設置無可厚非,但是在日后想要重新編輯一篇發(fā)表過的文章時就會頭疼了,因為CKEditor會自作多情的 生成很多冗雜或混亂的代碼,保持代碼的干凈整潔非常不便(當然你要想湊合著用也不會對實際顯示效果有很大改變,但會對網頁結構減分)。
    設置方法:將以下代碼添加到主題的functions.php文件里即可:
    add_filter('wp_default_editor', create_function('','return "html";'));
    添加編輯器默認內容(編輯器內可見)
    新建文章后編輯器里的內容默認是空的,有些朋友做的是WordPress主題站、插件站或單純的下載站,一些標準的格式化的文章每次都會輸入“主題 名稱”、“主題作者”、“下載地址”等內容,添加默認內容之后,這些重復性的工作以后再也不用了,一切都預定義好了。而且如果發(fā)表文章不需要這些預定義的 內容,只需要全選-Delete就ok了,并不會很麻煩。
    設置方法:在主題functions.php文件添加以下代碼即可:
    function insertPreContent($content) {
    if(!is_feed() && !is_home()) {
    $content.= "<div class='wpohome'>";
    $content.= "<h4>WordPress網站優(yōu)化之家</h4>";
    $content.= "這里的預定義內容在編輯器可見<a href='http://www.***.com'>WordPress網站優(yōu)化之家</a>";
    $content.= "</div>";
    }
    return $content;
    }
    add_filter ('default_content', 'insertPreContent');
    添加編輯器默認內容(編輯時不可見)
    此方法添加的內容在發(fā)布文章時自動添加在內容的最后,在編輯的時候是看不見的,用于添加訂閱、文章版權信息等等。
    設置方法:在主題functions.php文件添加以下代碼即可:
    function insertFootNote($content) {
    if(!is_feed() && !is_home()) {
    $content.= "<div class='wpohome'>";
    $content.= "<h4>WordPress網站優(yōu)化之家</h4>";
    $content.= "這里的預定義內容在編輯器可見<a href='http://www.***.com'>WordPress網站優(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)、隱藏按鈕顯示開關(wp_adv)、隱藏按鈕區(qū)起始部 分(wp_adv_start)、隱藏按鈕區(qū)結束部分(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');
    簡單添加自定義按鈕
    如果你使用了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表示換行。
    步驟二:把剛才寫好的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編輯器的使用技巧嗎?歡迎留言交流!