如何創建WordPress TinyMCE插件


如果您是WordPress開發人員,則有時可能會遇到自定義或擴展WordPress Visual Editor的情況。 例如,您可能想在Visual Editor的工具欄中添加一個按鈕,以使您的客戶端無需編寫任何HTML代碼即可輕鬆地插入文本框或號召性用語按鈕。 在本文中,我們將向您展示如何在WordPress中創建TinyMCE插件。

WordPress Visual Editor中的微型MCE工具欄

要求

本教程適用於高級用戶。 如果您是只想擴展可視化編輯器的初學者級用戶,請查看TinyMCE Advanced插件或查看有關使用WordPress可視化編輯器的這些提示。

對於本教程,您將需要基本的編碼技能,可以訪問WordPress安裝程序並在其中進行測試。

在實時網站上開發插件是一種不良做法。 代碼中的小錯誤會使您的網站無法訪問。 但是,如果必須在實時站點上進行操作,則至少應首先備份WordPress。

創建您的第一個TinyMCE插件

我們將首先創建一個WordPress插件來註冊我們的自定義TinyMCE工具欄按鈕。 單擊時,此按鈕將允許用戶添加帶有自定義CSS類的鏈接。

本文結尾將提供完整的源代碼,但在此之前,讓我們逐步創建插件。

首先,您需要在 wp-content/plugins WordPress安裝文件夾。 命名這個文件夾 tinymce-custom-link-class

從這裡開始,我們將開始添加插件代碼。

插件頭

在我們剛剛創建的插件目錄中創建一個新文件,並將其命名為 tinymce-custom-link-class.php。 將此代碼添加到文件中並保存。

/**
 * Plugin Name: TinyMCE Custom Link Class
 * Plugin URI: http://wpnull.xyz.com
 * Version: 1.0
 * Author: WPBeginner
 * Author URI: https://www.wpbeginner.com
 * Description: A simple TinyMCE Plugin to add a custom link class in the Visual Editor
 * License: GPL2
 */

這只是一個PHP註釋,它告訴WordPress插件的名稱以及作者和描述。

在WordPress管理區域中,通過轉到插件>已安裝的插件,然後單擊TinyMCE自定義鏈接類插件旁邊的激活來激活新插件:

已安裝的插件

設置我們的插件課程

如果兩個WordPress插件具有相同名稱的功能,則將導致錯誤。 通過將函數包裝在類中,可以避免此問題。

class TinyMCE_Custom_Link_Class {
	
	/**
	* Constructor. Called when the plugin is initialised.
	*/
	function __construct() {
		
	}

}

$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;

這將創建我們的PHP類以及一個構造,當我們到達該行時會調用該構造 $tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;

我們在此類中添加的任何函數都不應與其他WordPress插件衝突。

開始設置我們的TinyMCE插件

接下來,我們需要告訴TinyMCE,我們可能想將自定義按鈕添加到Visual Editor的工具欄中。 為此,我們可以使用WordPress的操作–特別是 init 行動。

在插件的內部添加以下代碼 __construct() 功能:

if ( is_admin() ) {
	add_action( 'init', array(  $this, 'setup_tinymce_plugin' ) );
}

這將檢查我們是否在WordPress管理界面中。 如果是,則要求WordPress運行 setup_tinymce_plugin 當WordPress完成其初始加載例程後,該函數就會在我們的類中起作用。

接下來,添加 setup_tinymce_plugin 功能:

/**
* Check if the current user can edit Posts or Pages, and is using the Visual Editor
* If so, add some filters so we can register our plugin
*/
function setup_tinymce_plugin() {

// Check if the logged in WordPress User can edit Posts or Pages
// If not, don't register our TinyMCE plugin
	
if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
	        return;
}

// Check if the logged in WordPress User has the Visual Editor enabled
// If not, don't register our TinyMCE plugin
if ( get_user_option( 'rich_editing' ) !== 'true' ) {
return;
}

// Setup some filters
add_filter( 'mce_external_plugins', array( &$this, 'add_tinymce_plugin' ) );
add_filter( 'mce_buttons', array( &$this, 'add_tinymce_toolbar_button' ) );
		
	}

這將檢查當前登錄的WordPress用戶是否可以編輯帖子或頁面。 如果他們不能這樣做,那麼為該用戶註冊我們的TinyMCE插件是沒有意義的,因為他們永遠不會看到Visual Editor。

然後,我們檢查用戶是否正在使用可視編輯器,因為某些WordPress用戶通過“用戶”>“您的個人資料”將其關閉。 同樣,如果用戶沒有使用Visual Editor,我們將返回(退出)該函數,因為我們無需執行其他任何操作。

最後,我們添加兩個WordPress過濾器– mce_external_pluginsmce_buttons,調用我們的函數,該函數將加載TinyMCE所需的Javascript文件,並在TinyMCE工具欄上添加一個按鈕。

將Javascript文件和按鈕註冊到可視化編輯器

讓我們繼續添加 add_tinymce_plugin 功能:

/**
* Adds a TinyMCE plugin compatible JS file to the TinyMCE / Visual Editor instance
*
* @param array $plugin_array Array of registered TinyMCE Plugins
* @return array Modified array of registered TinyMCE Plugins
*/
function add_tinymce_plugin( $plugin_array ) {

$plugin_array['custom_link_class'] = plugin_dir_url( __FILE__ ) . 'tinymce-custom-link-class.js';
return $plugin_array;

}
    

此函數告訴TinyMCE,它需要加載存儲在 $plugin_array 數組。 這些Javascript文件將告訴TinyMCE該怎麼做。

我們還需要向其中添加一些代碼 add_tinymce_toolbar_button 函數,告訴TinyMCE我們要添加到工具欄的按鈕:

/**
* Adds a button to the TinyMCE / Visual Editor which the user can click
* to insert a link with a custom CSS class.
*
* @param array $buttons Array of registered TinyMCE Buttons
* @return array Modified array of registered TinyMCE Buttons
*/
function add_tinymce_toolbar_button( $buttons ) {

array_push( $buttons, '|', 'custom_link_class' );
return $buttons;
}

這會將兩項推送到TinyMCE按鈕的數組上:分隔符(|)和按鈕的程序名稱(custom_link_class)。

保存您的插件,然後編輯頁面或帖子以查看可視編輯器。 可能是,該工具欄目前未顯示:

wordpress-tinymce-plugin-missing工具欄

不用擔心–如果我們使用Web瀏覽器的檢查器控制台,我們將看到TinyMCE生成了404錯誤和通知,告訴我們找不到Javascript文件。

wordpress-tinymce-plugin-js-404

很好–這意味著我們已經成功註冊了TinyMCE自定義插件,現在需要創建Javascript文件來告訴TinyMCE該怎麼做。

創建Javascript插件

在您的文件中創建一個新文件 wp-content/plugins/tinymce-custom-link-class 文件夾,並命名 tinymce-custom-link-class.js。 將此代碼添加到您的js文件中:

(function() {
	tinymce.PluginManager.add( 'custom_link_class', function( editor, url ) {
		
	});
})();

這將調用TinyMCE插件管理器類,我們可以使用該類執行許多與TinyMCE插件相關的操作。 具體來說,我們使用以下代碼將插件添加到TinyMCE: add 功能。

這接受兩個項目; 插件的名稱(custom_link_class)和匿名函數。

如果您熟悉編碼函數的概念,那麼匿名函數就是一個沒有名稱的函數。 例如, function foobar() { ... } 是一個函數,我們可以使用來在代碼中的其他地方調用 foobar()

使用匿名函數,我們無法在代碼中的其他位置調用該函數–只能在以下位置調用該函數: add() 函數被調用。

保存您的Javascript文件,然後編輯頁面或帖子以查看可視編輯器。 如果一切正常,您將看到工具欄:

wordpress-tinymce-plugin-可視編輯器工具欄

目前,我們的按鈕尚未添加到該工具欄。 那是因為我們只告訴TinyMCE我們是一個自定義插件。 現在,我們需要告訴TinyMCE該怎麼做–也就是說,在工具欄上添加一個按鈕。

更新您的Javascript文件,將您的現有代碼替換為以下內容:

(function() {
	tinymce.PluginManager.add( 'custom_link_class', function( editor, url ) {
		// Add Button to Visual Editor Toolbar
		editor.addButton('custom_link_class', {
			title: 'Insert Button Link',
			cmd: 'custom_link_class',
		});	
	});
})();

注意我們的匿名函數有兩個參數。 首先是 editor 實例–這是TinyMCE可視編輯器。 以相同的方式,我們可以在 PluginManager,我們還可以在上調用各種功能 editor。 在這種情況下,我們稱 addButton 功能,向工具欄添加按鈕。

保存Javascript文件,然後返回到可視編輯器。 乍一看,似乎什麼都沒有改變。 但是,如果將鼠標光標懸停在第一行最右側圖標的右側,則應該看到一個工具提示出現:

wordpress-tinymce-plugin-按鈕-noicon

我們已經成功向工具欄添加了一個按鈕,但是它需要一個圖像。 將以下參數添加到 addButton 功能,在下面 title: 線:

image: url + '/icon.png',

url 是我們插件的URL。 如果我們要在插件文件夾中引用圖像文件,這很方便,因為我們可以將圖像文件名附加到URL。 在這種情況下,我們需要一個名為 icon.png 在我們插件的文件夾中。 使用以下圖標:
圖標

重新加載我們的Visual Editor,現在您將看到帶有圖標的按鈕:
wordpress-tinymce-plugin-button-icon

定義要運行的命令

現在,如果您單擊按鈕,則什麼也不會發生。 讓我們向TinyMCE添加一個命令,告訴它單擊按鈕時該怎麼做。

在我們的Javascript文件中,將以下代碼添加到 editor.addButton 部分:

// Add Command when Button Clicked
editor.addCommand('custom_link_class', function() {
	alert('Button clicked!');
});

重新加載我們的可視編輯器,單擊按鈕,然後將出現一條警報,確認我們剛剛單擊了按鈕:

wordpress-tinymce-plugin-alert-button-clicked

讓我們用提示替換警報,詢問用戶要在Visual Editor中環繞所選文本的鏈接:

// Add Command when Button Clicked
editor.addCommand('custom_link_class', function() {
	// Check we have selected some text that we want to link
	var text = editor.selection.getContent({
		'format': 'html'
	});
	if ( text.length === 0 ) {
		alert( 'Please select some text to link.' );
		return;
	}

	// Ask the user to enter a URL
	var result = prompt('Enter the link');
	if ( !result ) {
		// User cancelled - exit
		return;
	}
	if (result.length === 0) {
		// User didn't enter a URL - exit
		return;
	}

	// Insert selected text back into editor, wrapping it in an anchor tag
	editor.execCommand('mceReplaceContent', false, '' + text + '');
});

此代碼塊執行一些操作。

首先,我們檢查用戶是否在可視編輯器中選擇了一些要鏈接的文本。 如果不是,他們將看到警報,告訴他們選擇一些文本進行鏈接。

wordpress-tinymce-plugin-警報選擇文本

接下來,我們要求他們輸入鏈接,再次檢查是否存在。 如果他們取消了,或者什麼也沒輸入,我們就什麼也不做。

wordpress-tinymce-plugin-提示網址

最後,我們運行 execCommand TinyMCE編輯器上的功能,專門運行 mceReplaceContent 行動。 這將使用我們選擇的文本,將替換的文本替換為我們的HTML代碼,該HTML代碼包含帶有class =“ button”的錨鏈接。

如果一切正常,您將看到在Visual Editor和Text視圖中鏈接了選定的文本,並將該類設置為 button

wordpress-tinymce-plugin-link-visual

wordpress-tinymce-plugin-link-html

概要

我們已經成功創建了一個WordPress插件,該插件在WordPress的TinyMCE可視編輯器中添加了一個按鈕。 本教程還介紹了可用於TinyMCE集成的TinyMCE API和WordPress過濾器的一些基礎知識。

我們添加了代碼,以便當用戶單擊我們的自定義按鈕時,系統會提示他們在可視編輯器中選擇一些文本,然後他們可以鏈接到他們選擇的URL。 最後,我們的插件然後用包含一個自定義CSS類的鏈接版本替換選定的文本 button

我們希望本教程可以幫助您學習如何創建WordPress TinyMCE插件。 您可能還需要查看有關如何創建特定於站點的WordPress插件的指南。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。