將自定義功能添加到WordPress Visual Editor

鑰匙要點

可以自定義由Tinymce編輯器控件提供動力的WordPress Visual Editor，以添加唯一功能，例如創建和註冊自定義Tinymce插件，該插件將選定的文本包裝在CSS類中。
• >要添加自定義功能，您需要在WordPress網站中創建一個Tinymce插件，註冊Tinymce操作和過濾器，然後使用Tinymce過濾器（MCE_EXTERNETHREL_PLUGINS和MCE_BUTTONS）加載外部Tinymce插件，並將/刪除/添加/刪除/刪除tinymce工具基鍵工具鍵工具鍵工具barar 。
還可以通過創建一個JavaScript插件來添加
• 自定義功能，該插件告訴Tinymce如何輸出按鈕以及單擊時該操作。這涉及使用Tinymce插件管理器類將插件添加到Tinymce，使用AddButton函數註冊按鈕，並使用AddCommand函數註冊命令。
>可以在不使用插件編碼的情況下自定義WordPress Visual Editor。為此目的的一些流行插件包括Tinymce Advanced，WP編輯和Ultimate Tinymce。
內容編輯器是WordPress的關鍵部分。它允許用戶在A
• visual
wysiwyg中創建和管理他們的內容，畫廊和視頻（您看到的是您得到的）。

>

>它還帶有atext>視圖，該視圖允許用戶在其內容中插入或修改HTML。

WordPress Visual Editor由Tinymce編輯器控件提供動力，該編輯器提供了Wysiwyg視圖以及您看到的格式按鈕：>

感謝Tinymce API和WordPress的濾鏡掛鉤，我們可以將自己的功能添加到WordPress Visual Editor中。具體來說，我們將研究如何創建和註冊一個自定義Tinymce插件，該插件將選定的文本包裝在CSS類中。

創建Tinymce插件

在您的WordPress網站上，創建WP-CONTENT/插件/Tinymce-Custom-Class文件夾。

>我們將在這裡存儲插件的文件，因此下一個使用以下代碼創建一個名為tinymce-custom-class.php的文件：>

>這為WordPress提供了一些有關我們的插件的信息，並設置了我們的構造，我們將在其中註冊我們的Tinymce操作和過濾器。

WordPress Tinymce濾波器

Tinymce提供了兩個關鍵過濾器，用於在Visual Editor工具欄上註冊元素：

<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>

>

mce_external_plugins：用於加載外部Tinymce插件（https://codex.wordpress.org/plugin_api/filter/filter_reference/mce_external_plugins）> MCE_BUTTONS：用於將/刪除按鈕添加到Tinymce工具欄（https://codex.wordpress.org/plugin_api/plugin_api/filter/filter/filter/mce_butference/mce_buttons，mce_buttons_2

>在調用這些過濾器之前，我們希望檢查我們在WordPress管理屏幕中。將以下代碼添加到__ -construct：>

<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函數以執行一些進一步的檢查：

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

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

>用戶>您的個人資料

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

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

在這裡，我們在$ plugin_array中註冊一個JavaScript文件，其中包含所有Tinymce JavaScript插件。

<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中註冊一個按鈕。同樣，讓我們​​在我們的課內添加此過濾器的函數調用：

此註冊我們的tinymce按鈕的編程名稱（custom_class）。

<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>

創建JavaScript插件

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

>

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

>

此JavaScript函數執行了一些操作：

<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>

>它調用Tinymce插件管理器類，我們可以用來執行許多與Tinymce插件相關的操作。具體來說，我們使用添加功能將插件添加到Tinymce。 在添加例程中，我們可以通過編輯器實例訪問視覺編輯器。我們使用AddButton函數註冊我們的按鈕，該函數由標題，命令和圖標映像。

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

>

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

單擊按鈕，您將看到

>按鈕單擊！

警報：

定義運行

的命令

>讓我們用提示替換警報，向用戶詢問他們想在視覺編輯器中包裹所選文本的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>

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

如果這些檢查通過，我們然後運行編輯器的execcommand函數，以替換所選文本，其中包含在跨度標籤中的選定文本，其中包括輸入的CSS類。

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

結論

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

>。

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

在下一篇文章中，我們將介紹一些更高級的步驟，以進一步自定義Tinymce插件。

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

>如何在WordPress Visual Editor中添加自定義按鈕？此API允許您在工具欄中添加新按鈕並定義其功能。您可以在WordPress安裝插件目錄中創建一個新的插件文件，並使用“ MCE_BUTTONS”過濾器添加按鈕。然後，您可以使用'MCE_EXTERNAL_PLUGINS'過濾器加載插件的JavaScript文件，該文件將定義按鈕的功能。

>我可以在不編碼的情況下自定義WordPress Visual Editor嗎？自定義WordPress Visual Editor而無需使用插件編碼。有幾個插件可讓您在工具欄上添加，刪除或重新排列按鈕，更改編輯器的外觀，並添加自定義樣式和格式。為此目的的一些流行插件包括Tinymce Advanced，WP編輯和Ultimate Tinymce。

>如何將自定義樣式添加到WordPress Visual Editor？

您可以在WordPress Visual中添加自定義樣式編輯器使用“ tiny_mce_before_init”過濾器。該過濾器允許您修改Tinymce設置數組，其中包含“ style_formats”選項。您可以將自定義樣式添加到此選項中，作為數組數組，每個數組都定義樣式。每種樣式都應包括“標題”，“塊”，“類”和“包裝器”屬性。

什麼是Tinymce，它與WordPress Visual Editor有何關係？

Tinymce是一種基於平台獨立於Web的JavaScript HTML Wysiwyg編輯器控制。這是為WordPress Visual編輯器提供動力的基礎軟件。通過理解和使用Tinymce API，您可以在WordPress Visual Editor中添加自定義功能。

>如何在WordPress Visual Editor中添加自定義字體？

您可以添加自定義字體通過使用“ MCE_CSS”過濾器來到WordPress Visual Editor。該過濾器允許您將其他CSS文件添加到編輯器。您可以創建一個CSS文件，該文件導入您的自定義字體並定義使用它的類，然後使用“ MCE_CSS”過濾器將此文件添加到編輯器中。

>我可以在移動設備上使用WordPress Visual Editor是的，是的，WordPress Visual Editor完全響應，可以在移動設備上使用。但是，由於屏幕尺寸較小，某些工具欄按鈕可能隱藏在“廚房接收器”下拉菜單中。

>我如何在WordPress Visual Editor中添加自定義格式？通過使用“ tiny_mce_before_init”過濾器和'style_formats'選項，將其定制為WordPress Visual Editor。您可以將自定義格式定義為數組數組，每個數組定義格式。每種格式都應包括一個“標題”，“內聯”，“類”和“包裝器”屬性。

>我如何禁用WordPress Visual Editor？

>您可以禁用WordPress Visual通過轉到用戶>在WordPress管理區域中的個人資料並檢查“編寫“視覺編輯器”選項時禁用視覺編輯器。

我可以在WordPress Visual Editor中使用短代碼？您可以在WordPress Visual Editor中使用短代碼。只需在編輯器中輸入短代碼即可在顯示帖子時對其進行處理。

>

>如何將表添加到WordPress Visual Editor？

您可以將表添加到WordPress通過使用工具欄上的“表”按鈕可視化編輯器。如果此按鈕不可見，則可能需要安裝諸如Tinymce Advanced之類的插件才能添加它。>

以上是將自定義功能添加到WordPress Visual Editor的詳細內容。更多資訊請關注PHP中文網其他相關文章！