使用wp_editor函數(shù)快速集成TinyMCE編輯器

最近在折騰投稿功能，需要集成TinyMCE編輯器，了解到WordPress 3.3版本新增了一個wp editor class （/wp-includes/class-wp-editor.php）。這個class使定制WordPress默認編輯器TinyMCE變的方便簡單。特別是新增的函數(shù)wp_editor，用這個函數(shù)就能在WordPress任何地方將一個textarea渲染成TinyMCE編輯器。

wp_editor 函數(shù)參數(shù)

<?php wp_editor( $content, $editor_id, $settings = array() ); ?>

• $content – textarea中的內(nèi)容
• $editor_id – 編輯器的HTML ID，只能包含小寫字母
• $settings – 設置選項，是一個數(shù)組，可以設置的參數(shù)包括：
  • wpautop – 是否開啟wpautop，默認為true
  • media_buttons – 是否顯示上傳多媒體的按鈕，默認true
  • textarea_name – textarea的name屬性，默認與$editor_id相同
  • textarea_rows – textarea的rows屬性，默認是get_option(‘default_post_edit_rows’, 10)，這一項在后臺設置
  • tabindex – tabindex數(shù)值，tabindex規(guī)定用戶用鍵盤的tab鍵切換表單元素時的順序。
  • editor_css – 給編輯器添加css樣式，適用于visual和html模式，必須包含<style>標簽
  • teeny – 是否開啟精簡模式，這種模式下只加載基本插件（不加載任何外部TinyMCE插件），加載的插件包括inlinepopups、fullscreen、wordpress、wplink和wpdialogs，默認為false
  • tinymce – 用數(shù)組形式直接向tinyMCE傳遞參數(shù)
  • quicktags – 加載Quicktags，即HTML模式下的那些按鈕，可以用數(shù)組形式直接向Quicktags傳遞參數(shù)。
  • dfw – 是否用DFW替換默認的全屏編輯器（需要特殊的DOM元素和css支持），開啟該模式時，加載的全屏插件是wpfullscreen，默認為false。

wp_editor 使用示例

1、啟用精簡模式

<?php wp_editor( '', 'myeditor', array(
            'teeny' => true )
    );
?>

效果如圖：

2、關閉精簡模式和上傳按鈕

<?php wp_editor( '', 'myeditor', array(
    'media_buttons' => false )
    );
?>

效果如圖：

3、更換皮膚為default，默認是wp_theme

<?php wp_editor( '', 'myeditor', array(
        'media_buttons' => false,
        'tinymce' => array( 'plugins' => '','skin' => 'default') )
      );
?>

效果如圖：

可選的皮膚：default、wp_theme、o2k7和highcontrast

4、控制每行顯示哪些按鈕，顯示部分WordPress隱藏的按鈕

<?php wp_editor( '', 'myeditor', array(
            'media_buttons' => false,
            'tinymce' => array( 'plugins' => '',
                        'skin' => 'o2k7',
                        'theme_advanced_buttons1' => 'undo,redo,|,bold,italic,underline,strikethrough|,justifyleft,justifycenter,justifyright,justifyfull,|,forecolor,backcolor',
                        'theme_advanced_buttons2' => 'cut,copy,paste,|,bullist,numlist,blockquote,|,link,unlink,anchor,image,|,sub,sup,hr'
                     )
            )
      );
?>

效果如圖：

使用tinymce參數(shù)向TinyMCE傳參時，使用TinyMCE的格式，具體參考這里

參考資料：http://www.solagirl.net/wp-editor-tutorial.html

推薦閱讀：http://soderlind.no/front-end-editor-in-wordpress-3-3/（更多示例）