<span>/**
</span><span> * Plugin Name: TinyMCE Custom Class
</span><span> * Plugin URI: https://www.sitepoint.com
</span><span> * Version: 1.0
</span><span> * Author: Tim Carr
</span><span> * Author URI: http://www.n7studios.co.uk
</span><span> * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor
</span><span> * License: GPL2
</span><span> */
</span>
<span>class TinyMCE_Custom_Class {
</span>
    <span>/**
</span><span>    * Constructor. Called when the plugin is initialised.
</span><span>    */
</span>    <span>function __construct() {
</span>
    <span>}
</span>
<span>}
</span>
<span>$tinymce_custom_class = new TinyMCE_Custom_Class;</span>

接下來，添加setup_tinymce_plugin函數(shù)以執(zhí)行一些進一步的檢查：

<span>if ( is_admin() ) {
</span>	<span>add_action( 'init', array( &$this, 'setup_tinymce_plugin' ) );
</span><span>}</span>

這檢查了WordPress用戶是否可以編輯帖子或頁面。如果他們不能的話，為該用戶註冊我們的Tinymce插件是沒有意義的，因為他們永遠不會看到視覺編輯器。 然後，我們檢查用戶是否正在使用Visual Editor，因為某些WordPress用戶通過

關閉了此功能。同樣，如果用戶不使用視覺編輯器，我們將返回（退出）函數(shù)，因為我們不需要做任何其他操作。 > 如果上述檢查通過，則註冊了兩個Tinymce WordPress濾波器-MCE_EXTERNEN_PLUGINS和MCE_BUTTONS。

>第一個過濾器 - MCE_EXTERNAL_PLUGINS - 允許我們註冊將與Visual Editor進行交互的Tinymce JavaScript插件文件。讓我們在同類中添加此過濾器的函數(shù)調用：

<span>/**
</span><span>* Check if the current user can edit Posts or Pages, and is using the Visual Editor
</span><span>* If so, add some filters so we can register our plugin
</span><span>*/
</span><span>function setup_tinymce_plugin() {
</span>
    <span>// Check if the logged in WordPress User can edit Posts or Pages
</span>    <span>// If not, don't register our TinyMCE plugin
</span>    <span>if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
</span>        <span>return;
</span>    <span>}
</span>
    <span>// Check if the logged in WordPress User has the Visual Editor enabled
</span>    <span>// If not, don't register our TinyMCE plugin
</span>    <span>if ( get_user_option( 'rich_editing' ) !== 'true' ) {
</span>        <span>return;
</span>    <span>}
</span>
    <span>// Setup some filters
</span>    <span>add_filter( 'mce_external_plugins', array( &$this, 'add_tinymce_plugin' ) );
</span>    <span>add_filter( 'mce_buttons', array( &$this, 'add_tinymce_toolbar_button' ) );
</span>
<span>}</span>

第二個過濾器 - MCE_BUTTONS - 告訴Tinymce我們想在Visual Editor中註冊一個按鈕。同樣，讓我們??在我們的課內添加此過濾器的函數(shù)調用：

<span>/**
</span><span> * Adds a TinyMCE plugin compatible JS file to the TinyMCE / Visual Editor instance
</span><span> *
</span><span> * <span>@param <span>array</span> $plugin_array Array of registered TinyMCE Plugins
</span></span><span> * <span>@return <span>array</span> Modified array of registered TinyMCE Plugins
</span></span><span> */
</span><span>function add_tinymce_plugin( $plugin_array ) {
</span>
    <span>$plugin_array['custom_class'] = plugin_dir_url( __FILE__ ) . 'tinymce-custom-class.js';
</span>    <span>return $plugin_array;
</span>
<span>}</span>

創(chuàng)建JavaScript插件

>我們調用MCE_EXTERNAL_PLUGINS時，我們引用了JavaScript文件。現(xiàn)在，我們需要創(chuàng)建該文件，並在其中添加一些JavaScript代碼。這將告訴Tinymce如何輸出按鈕，以及單擊時該怎麼辦。

>在插件文件夾中創(chuàng)建一個新文件，稱為tinymce-custom-class.js，插入以下代碼：

<span>/**
</span><span> * Adds a button to the TinyMCE / Visual Editor which the user can click
</span><span> * to insert a custom CSS class.
</span><span> *
</span><span> * <span>@param <span>array</span> $buttons Array of registered TinyMCE Buttons
</span></span><span> * <span>@return <span>array</span> Modified array of registered TinyMCE Buttons
</span></span><span> */
</span><span>function add_tinymce_toolbar_button( $buttons ) {
</span>
    <span>array_push( $buttons, 'custom_class' );
</span>    <span>return $buttons;
</span>
<span>}</span>

>
• >最後，我們使用AddCommand函數(shù)註冊一個命令，該函數(shù)顯示了一個警報，告訴我們何時單擊我們的按鈕。
• >我們還需要在我們的插件文件夾中包含iCON.png映像 - 這是將用於按鈕的圖標圖像：
>
保存代碼，並在WordPress管理>插件中激活您的插件。

接下來，創(chuàng)建或編輯頁面或帖子，您希望使用圖標看到您的按鈕：

單擊按鈕，您將看到

警報：

定義運行

>讓我們用提示替換警報，向用戶詢問他們想在視覺編輯器中包裹所選文本的CSS類名稱：

<span>/**
</span><span> * Plugin Name: TinyMCE Custom Class
</span><span> * Plugin URI: https://www.sitepoint.com
</span><span> * Version: 1.0
</span><span> * Author: Tim Carr
</span><span> * Author URI: http://www.n7studios.co.uk
</span><span> * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor
</span><span> * License: GPL2
</span><span> */
</span>
<span>class TinyMCE_Custom_Class {
</span>
    <span>/**
</span><span>    * Constructor. Called when the plugin is initialised.
</span><span>    */
</span>    <span>function __construct() {
</span>
    <span>}
</span>
<span>}
</span>
<span>$tinymce_custom_class = new TinyMCE_Custom_Class;</span>

此命令執(zhí)行一些理智檢查，以確保用戶選擇了一些文本，輸入了CSS類名稱並且沒有取消該過程。 >

如果一切正常，請切換到“文本”視圖，您會看到所選的文本現(xiàn)在包裹在跨度標籤中：

>我們創(chuàng)建了一個WordPress插件，以在Tinymce Visual Editor中添加一個按鈕。在此過程中，我們探索了WordPress與Tinymce集成的過濾器，以及在單擊時添加按鈕並執(zhí)行操作所需的JavaScript代碼。

>要下載完整的源代碼，請訪問github存儲庫或直接zip文件下載鏈接。

>在WordPress Visual Editor中添加自定義功能的常見問題（常見問題解答）