黃聰：TinyMCE 4 加強 添加樣式、按鈕、字體、下拉菜單和彈出式窗口

我最喜歡 WordPress 3.9 的更新是使用了 TinyMCE 4.0 編輯器。新的 TinyMCE 看起來看起來更整潔（真正匹配WP儀表板），它有一些很是不錯的附加功能。個人不少老主題和插件必須更新爲新 TinyMCE 的工做，因此我花了一些時間研究 API 並找出一些很酷的東西。下面我給你介紹下如何能夠拓展 TinyMCE 功能的例子。我不會指導您完成全部步驟，或者是什麼的代碼意味着（這是爲開發者），但會爲您提供您的主題或插件可用的代碼，你能夠複製徹底相同的代碼，粘貼，而後相應地調整。

增長字體大小和字體選擇

默認狀況下，自定義字體和字體大小都不會添加到 TinyMCE 編輯器。下面的函數能夠將這兩個下拉菜單添加到編輯器第二行按鈕的最左邊。若是你想添加到一個不一樣的行，你只需修改「mce_buttons_2」（例如：使用「mce_buttons_3'爲第3行）。

// 在編輯器中啓用字體和字體大小選擇
 if ( ! function_exists( 'wpex_mce_buttons' ) ) { function wpex_mce_buttons( $buttons ) { array_unshift( $buttons, 'fontselect' ); // 添加字體選擇 array_unshift( $buttons, 'fontsizeselect' ); // 添加字體大小選擇 return $buttons; } } add_filter( 'mce_buttons_2', 'wpex_mce_buttons' );

添加自定義字體大小

默認的字體大小設置爲 pt 值，這並不老是理想的。我更喜歡使用像素值（12像素，13px，14px，16px 等等），並提供更靈活的選擇。下面的函數將改變在下拉選擇器的默認字體大小的選項。

// 自定義編輯器字體大小
 if ( ! function_exists( 'wpex_mce_text_sizes' ) ) { function wpex_mce_text_sizes( $initArray ){ $initArray['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px"; return $initArray; } } add_filter( 'tiny_mce_before_init', 'wpex_mce_text_sizes' );

添加自定義字體

在默認狀況下，在字體選擇列表中，默認字體選項都是「網頁安全」字體，但若是你想添加更多的字體，或許一些谷歌的字體？很是簡單，看一下下面的例子。

// 添加自定義字體到字體列表
 if ( ! function_exists( 'wpex_mce_google_fonts_array' ) ) { function wpex_mce_google_fonts_array( $initArray ) { $initArray['font_formats'] = 'Lato=Lato;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats'; return $initArray; } } add_filter( 'tiny_mce_before_init', 'wpex_mce_google_fonts_array' );

請注意我是如何在上面的代碼中加入「Lato」字體的？就這麼簡單！在個人全部 WordPress主題，我經過遍歷全部在網站上使用的自定義字體定義在主題面板上，並把它們添加到選擇框，這樣也能夠在編輯文章/頁面的時候使用它們（甜蜜）。可是它僅僅是添加字體到列表中，卻不會神奇地加載腳本，因此當你在編輯器中的更改字體，你不能夠真正看到適用於它的自定義字體……這就是下面的代碼所要作的！

// 添加 google 字體腳本
 if ( ! function_exists( 'wpex_mce_google_fonts_styles' ) ) { function wpex_mce_google_fonts_styles() { $font_url = 'http://fonts.googleapis.com/css?family=Lato:300,400,700'; add_editor_style( str_replace( ',', '%2C', $font_url ) ); } } add_action( 'init', 'wpex_mce_google_fonts_styles' );

啓用格式（樣式）下拉菜單和添加新樣式

還記得在 WP3.8 的「樣式」下拉列表嗎？這是很酷的！你能夠用它來添加一些很酷的類，以便在文章編輯器中使用（我用它在 WPExplorer 實現按鈕，彩色跨度，盒子 等等）。在 WP3.9，你仍然能夠添加本身的格式，可是，它已改名爲新的 TinyMCE4.0「格式」，因此它的工做原理有一點點不一樣。下面的例子，就是如何在格式下拉列表中添加一些新的項目。

啓用格式下拉菜單

這在 WP3.9 之前的版本中，也是這樣作的。但我仍是要分享一下，以防你不知道該怎麼作。

// 添加格式下拉菜單到編輯器中
 if ( ! function_exists( 'wpex_style_select' ) ) { function wpex_style_select( $buttons ) { array_push( $buttons, 'styleselect' ); return $buttons; } } add_filter( 'mce_buttons', 'wpex_style_select' );

添加新項目到格式菜單

增長新的項目是超級容易。請注意我下面的代碼是如何添加「$settings[‘style_formats_merge’] = true;「 的，這樣能夠確保你添加格式下拉菜單到編輯器中，不會影響其餘人 - 不要去覆蓋整個事情（也許其餘的插件要使用它）。

// 添加新樣式到格式下拉菜單中
if ( ! function_exists( 'wpex_styles_dropdown' ) ) { function wpex_styles_dropdown( $settings ) { // 建立新樣式的數組 $new_styles = array( array( 'title' => __( 'Custom Styles', 'wpex' ), 'items' => array( array( 'title' => __('Theme Button','wpex'), 'selector' => 'a', 'classes' => 'theme-button' ), array( 'title' => __('Highlight','wpex'), 'inline' => 'span', 'classes' => 'text-highlight', ), ), ), ); // 合併新老樣式 $settings['style_formats_merge'] = true; // 添加新樣式 $settings['style_formats'] = json_encode( $new_styles ); // 返回新設置 return $settings; } } add_filter( 'tiny_mce_before_init', 'wpex_styles_dropdown' );

添加一個簡單的MCE按鈕

添加一個新按鈕到 TinyMCE 編輯器對於簡碼來講是特別有用的，由於做爲一個用戶，您沒必要記住任何簡碼，你能夠簡單地點擊一個按鈕，並將其插入。我不是說要爲你的全部簡碼都添加按鈕到TinyMCE（我討厭開發者這樣作，它的這種很差的作法，看起來很可怕），但若是添加1個或幾個，我會贊成的）若是你要添加一堆，那麼你應該建立一個子菜單，在後面的章節將介紹。

PHP代碼 - 聲明新的MCE插件

此代碼將聲明新的MCE插件，請務必更改JavaScript文件「MCE-button.js」的位置，以匹配您的文件的位置（我會給你的代碼，以及在下一小節），以及將「my」這個前綴修改成其餘更惟一的字符。

// 掛載函數到正確的鉤子
function my_add_mce_button() { // 檢查用戶權限 if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) { return; } // 檢查是否啓用可視化編輯 if ( 'true' == get_user_option( 'rich_editing' ) ) { add_filter( 'mce_external_plugins', 'my_add_tinymce_plugin' ); add_filter( 'mce_buttons', 'my_register_mce_button' ); } } add_action('admin_head', 'my_add_mce_button'); // 聲明新按鈕的腳本 function my_add_tinymce_plugin( $plugin_array ) { $plugin_array['my_mce_button'] = get_template_directory_uri() .'/js/mce-button.js'; return $plugin_array; } // 在編輯器上註冊新按鈕 function my_register_mce_button( $buttons ) { array_push( $buttons, 'my_mce_button' ); return $buttons; }

JS代碼 - 添加MCE按鈕

這個js代碼放在上面的「symple_shortcodes_add_tinymce_plugin」函數中所註冊的js文件。它能夠在編輯器中添加一個新的文本按鈕，上面寫着「New Button」，點擊時，它會插入文本「WP is awesome! 」。

(function() {
tinymce.PluginManager.add('my_mce_button', function( editor, url ) { editor.addButton('my_mce_button', { text: 'New Button', icon: false, onclick: function() { editor.insertContent('WP is awesome!'); } }); }); })();

添加自定義圖標到新的MCE按鈕

上面我介紹瞭如何在編輯器中添加一個新的按鈕「New Button」，這有點不夠完美......下面將告訴你如何添加本身的自定義圖標。

加載你的CSS樣式表

使用此函數來加載一個新的樣式表到你的管理面板使用 - 一些插件/主題可能已經添加了樣式表，因此若是你的主題/插件這樣作，跳過這一點，只需添加自定義CSS和調整的JS（以下圖所示）。

function my_shortcodes_mce_css() { wp_enqueue_style('symple_shortcodes-tc', plugins_url('/css/my-mce-style.css', __FILE__) ); } add_action( 'admin_enqueue_scripts', 'my_shortcodes_mce_css' );

你的自定義css

i.my-mce-icon { background-image: url('你的圖標地址'); }

調整你的js

如今，簡單的調整你之前添加的js，刪除文本參數，取而代之，添加一個css類名。

(function() {
tinymce.PluginManager.add('my_mce_button', function( editor, url ) { editor.addButton( 'my_mce_button', { icon: 'my-mce-icon', onclick: function() { editor.insertContent('WP is awesome!'); } }); }); })();

添加一個按鈕子菜單

前面我提到，增長了大量的新圖標到 TinyMCE 是一個壞主意，因此來看看下面的代碼，看看如何能夠編輯JavaScript來顯示一個子菜單的自定義按鈕。

(function() {
tinymce.PluginManager.add('my_mce_button', function( editor, url ) { editor.addButton( 'my_mce_button', { text: 'Sample Dropdown', icon: false, type: 'menubutton', menu: [ { text: 'Item 1', menu: [ { text: 'Sub Item 1', onclick: function() { editor.insertContent('WP is awesome!'); } }, { text: 'Sub Item 2', onclick: function() { editor.insertContent('WP is awesome!'); } } ] }, { text: 'Item 2', menu: [ { text: 'Sub Item 1', onclick: function() { editor.insertContent('WP is awesome!'); } }, { text: 'Sub Item 2', onclick: function() { editor.insertContent('WP is awesome!'); } } ] } ] }); }); })();

添加一個彈出窗口

在上面的例子中，你可能會注意到，每個按鈕只需插入文本「WP is awesome!」這是很酷，但若是建立一個彈出窗口，用戶能夠改變插入的文本，是否是更酷？立刻來實現吧！

(function() {
tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
editor.addButton( 'my_mce_button', {
text: 'Sample Dropdown',
icon: false,
type: 'menubutton',
menu: [
{
text: 'Item 1',
menu: [
{
text: 'Pop-Up',
onclick: function() {
editor.windowManager.open( {
title: 'Insert Random Shortcode', body: [ { type: 'textbox', name: 'textboxName', label: 'Text Box', value: '30' }, { type: 'textbox', name: 'multilineName', label: 'Multiline Text Box', value: 'You can say a lot of stuff in here', multiline: true, minWidth: 300, minHeight: 100 }, { type: 'listbox', name: 'listboxName', label: 'List Box', 'values': [ {text: 'Option 1', value: '1'}, {text: 'Option 2', value: '2'}, {text: 'Option 3', value: '3'} ] } ], onsubmit: function( e ) { editor.insertContent( '[random_shortcode textbox="' + e.data.textboxName + '" multiline="' + e.data.multilineName + '" listbox="' + e.data.listboxName + '"]'); } }); } } ] } ] }); }); })();