深入剖析WordPress的TinyMCE編輯器

雖然現在WordPress主推它的古騰堡編輯器，但我們有必要專門針對WordPress的TinyMCE編輯器寫一篇文章。此前我們已經撰寫了一篇文章是關於WordPress文字編輯器，而在這篇文章中，我們將剖析WordPress的TinyMCE編輯器，我們將根據自己的意願進行調整。按照下面的操作，我們將向您展示如何：

• 將自定義樣式新增到TinyMCE編輯器
• 啟用隱藏按鈕
• 使用現有外掛增強TinyMCE編輯器
• 開發自定義TinyMCE外掛
• 使用免費WordPress外掛為TinyMCE新增樣式和按鈕

TinyMCE是一個基於瀏覽器的WYSIWYG編輯器，用JavaScript編寫，並在LGPL下作為開源軟體釋出

WordPress的TinyMCE編輯器

預設情況下，WordPress的TinyMCE編輯器提供兩行按鈕來建立、編輯和格式化文章內容。第一行（主工具欄）包括樣式和格式設定功能。附加控制元件允許新增、編輯和刪除錨點，新增<!–more–>標籤，啟用無干擾模式。對於具有文書處理器基本知識的任何人來說，所有這些按鈕都應該非常熟悉。

工具欄切換按鈕切換高階編輯器工具欄（第二行按鈕），它提供文字元素（段落、標題和預格式化文字）的下拉選單、更多樣式控制元件和一些附加功能（貼上為文字、清除格式、特殊字元（撤消和重做）在許多方面都派上用場。

特殊字元表允許使用者快速新增HTML實體

最後，問號按鈕提供了可改善使用者書寫體驗的鍵盤快捷鍵列表。

TinyMCE快捷方式面板

現在將您的內容新增到視覺化編輯器中併為其設定樣式，然後切換到文字編輯器。您會找到相應的HTML結構，因為WordPress在從視覺模式切換到文字模式時會保留您的輸入。

預設的主工具欄和高階工具欄提供了大量功能，可以使用附加按鈕和控制元件進行擴充套件。其中許多按鈕在TinyMCE中都是開箱即用的，我們只需要啟用它們即可使它們生效。此外，我們可以通過安裝一個或多個現有外掛來新增大量高階功能。

如果所有這些按鈕還不夠，我們可以通過開發自定義外掛，用您最酷的功能來增強編輯器。

話雖如此，讓我們從最簡單和最常見的API用法開始。

將自定義樣式新增到TinyMCE編輯器

假設您需要提供一種簡單的方法將自定義樣式新增到來自TinyMCE的文章內容中。這是一個兩步程式：

• 首先，我們需要啟用一個名為Styleselect的隱藏下拉選單，
• 然後我們必須定義我們想要新增到Styleselect選單的每個樣式。

我們可以通過過濾TinyMCE按鈕陣列來完成第一個任務。預設工具欄顯示一兩行按鈕，但由於以下過濾器，我們最多可以啟用四行工具欄：

• mce_buttons過濾主工具欄按鈕（第一行），始終可見；
• mce_buttons_2過濾高階工具欄按鈕（第二行），可以由使用者開啟/關閉；
• mce_buttons_3預設不活動；
• mce_buttons_4預設不活動。

我們可以將回撥函式掛接到這些過濾器之一以顯示/隱藏現有按鈕，例如樣式選擇下拉選單。以下功能啟用第二行中的選單：

function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );

所述PHP函式array_unshift預先考慮styleselect元件到的前$按鈕陣列。

格式下拉選單將顯示所有可用CSS樣式的列表

現在按鈕已被啟用，我們可以通過tiny_mce_before_init過濾器過濾一組TinyMCE配置引數來註冊我們的自定義樣式。考慮以下函式：

function my_tiny_mce_before_init( $mceInit ) {
$style_formats = array(
array(
'title' => 'PHP',
'block' => 'code',
'classes' => 'language-php'
)	
);
$mceInit['style_formats'] = json_encode( $style_formats );	
return $mceInit;    
}
add_filter( 'tiny_mce_before_init', 'my_tiny_mce_before_init' );

所述style_formats元件是元件的JSON編碼陣列。每個元素設定單個選單項的配置引數。上面的函式用單個自定義元素替換預設樣式，該元素將所選文字包裝在code.language-php元素中。

包含單個自定義項的Styleselect下拉選單

在我們的示例中，我們為單個選單項設定了三個屬性：

• title : 選單項的標題；
• block : 要生成的塊元素；
• classes：要應用於選擇的以空格分隔的CSS類列表。

我們將程式碼元素新增為塊，因此它只會應用於完整選擇一次。將其新增為內聯元素會將程式碼標記應用於每個選定的行。

我們可以新增更多專案並按類別對它們進行分組，如下例所示：

function my_tiny_mce_before_init( $mceInit ) {
$style_formats = array(
array(
'title' => 'Code language',
'items' => array(
array(
'title' => 'PHP',
'block' => 'code',
'classes' => 'language-php'
),
array(
'title' => 'CSS',
'block' => 'code',
'classes' => 'language-css'
),
array(
'title' => 'HTML',
'block' => 'code',
'classes' => 'language-html'
)
)
)	
);
$mceInit['style_formats'] = json_encode( $style_formats );
return $mceInit;    
}
add_filter( 'tiny_mce_before_init', 'my_tiny_mce_before_init' );

所述style_formats元件是的引數的多維陣列。在此示例中，我們新增了第一級項（程式碼語言）和三個子項（PHP、CSS、HTML）。下圖顯示了生成的選單。

我們可以對選單項進行分組並減小螢幕上的選單大小

TinyMCE將樣式應用於所選元素，但不知道這些樣式，因此它們不會應用於編輯器中的內容。如果需要實時預覽，我們必須使用add_editor_style()函式註冊一個自定義樣式表：

/**
* Registers an editor stylesheet for a custom theme.
*/
function my_theme_add_editor_styles() {
add_editor_style( 'css/my-editor-style.css' );
}
add_action( 'admin_init', 'my_theme_add_editor_styles' );

此函式註冊一個樣式表，TinyMCE將使用該樣式表將內容樣式化到編輯器中。例如，假設我們想對PHP、CSS和HTML程式碼應用不同的顏色。為了完成這個任務，我們將以下宣告新增到css/my-editor-style.css樣式表中：

.language-php{ color: red; }
.language-css{ color: green; }
.language-html{ color: blue; }

TinyMCE將產生如下圖所示的輸出。

注意：我們只檢視了幾個配置設定，但是TinyMCE API使開發人員可以很好地控制編輯器。有關元素和屬性的完整列表以及一些用法示例，請參閱TinyMCE文件。

啟用TinyMCE隱藏按鈕

我們可以通過多種方式向視覺化編輯器新增按鈕。在許多情況下，我們不需要構建自定義按鈕，因為TinyMCE提供了大量我們可以輕鬆啟用的隱藏按鈕。其中一個按鈕是Styleselect下拉選單，但我們有一長串非活動按鈕，我們可以通過mce_buttons_{n}過濾器之一過濾按鈕陣列來啟用（有關可用按鈕的完整列表，請參閱TinyMCE文件）。

考慮以下示例：

function my_mce_buttons_3( $buttons ) {	
$buttons[] = 'superscript';
$buttons[] = 'subscript';
return $buttons;
}
add_filter( 'mce_buttons_3', 'my_mce_buttons_3' );

上面的回撥函式將上標和下標元素新增到陣列$buttons的末尾。 影象顯示了新增到TinyMCE工具欄第三行的兩個額外按鈕

以下是TinyMCE中可用的隱藏按鈕列表：

• 剪下
• 複製
• 貼上
• hr
• 格式選擇
• 字型選擇
• 字型大小選擇
• 樣式選擇
• 下標（以前是sub）
• 上標（以前是sup）
• 背景色
• 新檔案

影象顯示了包含所有可用按鈕的TinyMCE工具欄

如果這些按鈕都不適合我們的需求，我們可以為編輯器提供更多功能，這要歸功於大量的官方外掛。

使用TinyMCE外掛增強視覺化編輯器

假設您的目標是通過WordPress外掛將TinyMCE Table按鈕包含到視覺化編輯器中。

首先，您必須從TinyMCE網站下載開發包。解壓zip檔案並從/js/tinymce/plugin/table資料夾中獲取plugin.min.js檔案。

在/wp-content/plugins 中建立以下資料夾：

• /wp-content/plugins/tinymce-example-plugin/
• /wp-content/plugins/tinymce-example-plugin/mce/table

完成後，在外掛根資料夾中建立一個新的tinymce-example-plugin.php檔案，並將plugin.min.js檔案上傳到table資料夾中（見下圖）。

圖為外掛檔案結構

現在將以下行新增到tinymce-example-plugin.php：

<?php
/**
* @package TinyMCE_example_plugin
* @version 1.0
*/
/*
Plugin Name: TinyMCE example plugin
Plugin URI: http://wordpress.org/extend/plugins/#
Description: This is an example plugin 
Author: Your Name
Version: 1.0
Author URI: http://yourdomain.com/
*/ 

為了將表格按鈕包含到TinyMCE編輯器中，我們只需要兩個過濾器：mce_buttons向TinyMCE主工具欄新增新按鈕（我們可以使用任何mce_buttons_{n}過濾器，具體取決於必須顯示按鈕的行）mce_external_plugins載入外部TinyMCE外掛。

這是外掛檔案的程式碼：

function example_plugin_register_buttons( $buttons ) {
$buttons[] = 'table';
return $buttons;
}
// add new buttons
add_filter( 'mce_buttons', 'example_plugin_register_buttons' );
function example_plugin_register_plugin( $plugin_array ) {
$plugin_array['table'] = plugins_url( '/mce/table/plugin.min.js', __FILE__ );
return $plugin_array;
}
// Load the TinyMCE plugin
add_filter( 'mce_external_plugins', 'example_plugin_register_plugin' );

第一個函式向主工具欄新增一個新按鈕，而第二個函式從指定的URL載入外掛。該plugins_url()函式獲取絕對URL到外掛目錄下的指定檔案（閱讀更多Codex）。

現在我們可以儲存檔案並啟用外掛。下圖顯示了增強的工具欄。

就這樣。按照相同的步驟，我們可以將任何現有的TinyMCE外掛新增到WordPress視覺化編輯器。

您可以在Gist上檢視此示例的PHP程式碼。

構建TinyMCE外掛

最後，我們可以構建我們的TinyMCE自定義外掛。假設您要新增一個按鈕以允許使用者將所選內容包裝在以下標籤中：

<pre><code>Selected text</code></pre>

我們甚至可以決定在<code>標籤中新增一個 CSS 類，以提供對Prism程式碼熒光筆的支援。我們要：

• 在WordPress外掛中註冊自定義TinyMCE按鈕和外掛；
• 開發TinyMCE外掛；

我們已經知道如何在TinyMCE中註冊外掛和新增按鈕：

function example_plugin_register_buttons( $buttons ) {
$buttons[] = 'prism';
return $buttons;
}
// add new buttons
add_filter( 'mce_buttons', 'example_plugin_register_buttons' );
function example_plugin_register_plugin( $plugin_array ) {
$plugin_array['prism'] = plugins_url( '/mce/prism/plugin.js', __FILE__ );
return $plugin_array;
}
// Load the TinyMCE plugin
add_filter( 'mce_external_plugins', 'example_plugin_register_plugin' );

這與前面的示例程式碼完全相同，唯一的區別是現在我們正在註冊一個名為Prism的自定義外掛。現在讓我們建立以下plugin.js檔案：

(function() {
var languages = ['css', 'php', 'html', 'javascript'];
tinymce.PluginManager.add( 'prism', function( editor ){
var items = [];
tinymce.each( languages, function( languageName ){
items.push({
text: languageName,
onclick: function(){
var content = tinyMCE.activeEditor.selection.getContent();
editor.insertContent( '<pre><code class="language-' + languageName + '">' + content + '</code></pre>' );
}
});
});
editor.addButton( 'prism', {
type: 'menubutton',
text: 'Prism',
icon: 'code',
menu: items
});
});
})();

此程式碼也可在Gist上找到。

我們的目標不是深入研究TinyMCE API，您可以在TinyMCE開發人員文件中找到您需要了解的所有資訊。這個檔案應該放在我們外掛目錄的/mce/prism/子資料夾中。JS函式在languages陣列的元素之間進行迭代，並將一個新物件推送到每種語言的items 陣列中。addButton方法建立Prism選單按鈕，併為items陣列的每個元素新增一個選單項。

儲存、上傳和重新整理，您華麗的下拉選單按鈕將以其美麗的方式彈出。

關於如何開發TinyMCE外掛的更多資訊可以在開發人員的線上文件中找到。

適用於WordPress的TinyMCE高階外掛

如果您不是開發人員，也可以增強視覺化編輯器。TinyMCE Advanced是一個免費的WordPress外掛，它將十五個TinyMCE外掛的功能帶到預設的視覺化編輯器中。

感謝TinyMCE Advanced，使用者可以在編輯器工具欄的四行上新增、刪除、重新排列按鈕。此外，該外掛還提供了一個選項來啟用工具欄上方的選單。

從編輯器設定頁面，我們可以新增、刪除和排列TynyMCE工具欄上的按鈕

從外掛選項頁面，我們可以啟用幾個高階功能，如表格按鈕、字型系列和字型大小選單、顯示塊和顯示不可見字元按鈕。

其他選項允許使用者確定將受新設定等影響的編輯器。

TinyMCE Advanced提供了一個完整的編輯器設定列表

小結

TinyMCE API提供了很多可以玩的東西。我們可以啟用隱藏的功能或註冊外部外掛。如果沒有可用的功能對我們來說足夠，我們可以使用 API 並構建自定義擴充套件。您有任何進一步的想法來增強WordPress TinyMCE編輯器嗎？