Wie man ein WordPress TinyMCE-Plugin erstellt

Wenn Sie ein WordPress-Entwickler sind, stoßen Sie irgendwann auf die Anpassung oder Erweiterung des WordPress Visual Editors. Zum Beispiel möchten Sie vielleicht eine Schaltfläche zur Symbolleiste des Visual Editors hinzufügen, damit Ihr Kunde einfach eine Textbox oder eine Call-to-Action-Schaltfläche einfügen kann, ohne HTML-Code schreiben zu müssen. In diesem Artikel zeigen wir Ihnen, wie Sie ein TinyMCE-Plugin in WordPress erstellen.

Anforderungen

Dieses Tutorial richtet sich an fortgeschrittene Benutzer. Wenn Sie ein Anfänger sind, der nur den visuellen Editor erweitern möchte, sehen Sie sich bitte das TinyMCE Advanced-Plugin an oder werfen Sie einen Blick auf diese Tipps zur Verwendung des WordPress-visuellen Editors.

Für dieses Tutorial benötigen Sie grundlegende Programmierkenntnisse und Zugriff auf eine WordPress-Installation, auf der Sie es testen können.

Es ist eine schlechte Praxis, Plugins auf einer Live-Website zu entwickeln. Ein kleiner Fehler im Code kann Ihre Website unzugänglich machen. Wenn Sie dies jedoch auf einer Live-Website tun müssen, dann sichern Sie WordPress zumindest zuerst.

Erstellen Ihres ersten TinyMCE-Plugins

Wir beginnen mit der Erstellung eines WordPress Plugins, um unseren benutzerdefinierten TinyMCE-Toolbar-Button zu registrieren. Wenn dieser Button geklickt wird, kann der Benutzer einen Link mit einer benutzerdefinierten CSS-Klasse hinzufügen.

Der Quellcode wird am Ende dieses Artikels vollständig bereitgestellt, aber bis dahin erstellen wir das Plugin Schritt für Schritt.

Zuerst müssen Sie ein Verzeichnis im Ordner wp-content/plugins Ihrer WordPress-Installation erstellen. Nennen Sie diesen Ordner tinymce-custom-link-class.

Von hier aus beginnen wir mit dem Hinzufügen unseres Plugin-Codes.

Der Plugin-Header

Erstellen Sie eine neue Datei im gerade erstellten Plugin-Verzeichnis und nennen Sie diese Datei tinymce-custom-link-class.php. Fügen Sie diesen Code in die Datei ein und speichern Sie sie.

/**
 * Plugin Name: TinyMCE Custom Link Class
 * Plugin URI: http://wpbeginner.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
 */

Dies ist nur ein PHP-Kommentar, der WordPress den Namen des Plugins sowie den Autor und eine Beschreibung mitteilt.

Im WordPress Admin-Bereich aktivieren Sie Ihr neues Plugin, indem Sie zu Plugins > Installierte Plugins gehen und dann auf Aktivieren neben dem TinyMCE Custom Link Class Plugin klicken:

Einrichten unserer Plugin-Klasse

Wenn zwei WordPress-Plugins Funktionen mit demselben Namen haben, würde dies einen Fehler verursachen. Wir werden dieses Problem vermeiden, indem wir unsere Funktionen in eine Klasse einpacken.

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

}

$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;

Dies erstellt unsere PHP-Klasse zusammen mit einem Konstruktor, der aufgerufen wird, wenn wir die Zeile $tinymce_custom_link_class = new TinyMCE_Custom_Link_Class; erreichen.

Alle Funktionen, die wir innerhalb dieser Klasse hinzufügen, sollten nicht mit anderen WordPress-Plugins in Konflikt geraten.

Einrichten unseres TinyMCE-Plugins starten

Als Nächstes müssen wir TinyMCE mitteilen, dass wir möglicherweise unseren benutzerdefinierten Button zur Symbolleiste des visuellen Editors hinzufügen möchten. Dazu können wir die Aktionen von WordPress verwenden – insbesondere die init-Aktion.

Fügen Sie den folgenden Code in die __construct()-Funktion Ihres Plugins ein:

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

Dies prüft, ob wir uns in der WordPress-Administrationsschnittstelle befinden. Wenn ja, bittet es WordPress, die Funktion setup_tinymce_plugin innerhalb unserer Klasse auszuführen, sobald WordPress seine anfängliche Laderoutine abgeschlossen hat.

Fügen Sie als Nächstes die Funktion setup_tinymce_plugin hinzu:

/**
* 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' ) );
		
	}

Dies prüft, ob der aktuell angemeldete WordPress-Benutzer Beiträge oder Seiten bearbeiten kann. Wenn nicht, hat es keinen Sinn, unser TinyMCE-Plugin für diesen Benutzer zu registrieren, da er den Visual Editor nie sehen wird.

Dann prüfen wir, ob der Benutzer den visuellen Editor verwendet, da einige WordPress-Benutzer diesen über Benutzer > Ihr Profil deaktivieren. Auch hier kehren wir (beenden) die Funktion, wenn der Benutzer den visuellen Editor nicht verwendet, da wir nichts weiter tun müssen.

Schließlich fügen wir zwei WordPress-Filter hinzu – mce_external_plugins und mce_buttons –, um unsere Funktionen aufzurufen, die die erforderliche Javascript-Datei für TinyMCE laden und eine Schaltfläche zur TinyMCE-Symbolleiste hinzufügen.

Registrieren der Javascript-Datei und des Buttons für den visuellen Editor

Fügen wir nun die Funktion add_tinymce_plugin hinzu:

/**
* 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;

}
    

Diese Funktion teilt TinyMCE mit, dass es die in der $plugin_array-Array gespeicherten Javascript-Dateien laden muss. Diese Javascript-Dateien teilen TinyMCE mit, was zu tun ist.

Wir müssen auch Code zur Funktion add_tinymce_toolbar_button hinzufügen, um TinyMCE über den Button zu informieren, den wir der Toolbar hinzufügen möchten:

/**
* 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;
}

Dies fügt zwei Elemente zum Array der TinyMCE-Schaltflächen hinzu: einen Trennstrich (|) und den programmatischen Namen unserer Schaltfläche (custom_link_class).

Speichern Sie Ihr Plugin und bearbeiten Sie dann eine Seite oder einen Beitrag, um den visuellen Editor anzuzeigen. Wahrscheinlich wird die Symbolleiste im Moment nicht angezeigt:

Keine Sorge – wenn wir die Inspektionskonsole unseres Webbrowsers verwenden, sehen wir, dass TinyMCE einen 404-Fehler und eine Benachrichtigung generiert hat, die uns mitteilt, dass unsere Javascript-Datei nicht gefunden werden kann.

Das ist gut – es bedeutet, dass wir unser benutzerdefiniertes TinyMCE-Plugin erfolgreich registriert haben und nun die Javascript-Datei erstellen müssen, um TinyMCE mitzuteilen, was es tun soll.

Erstellen des Javascript-Plugins

Erstellen Sie eine neue Datei in Ihrem Ordner wp-content/plugins/tinymce-custom-link-class und nennen Sie sie tinymce-custom-link-class.js. Fügen Sie diesen Code in Ihre JS-Datei ein:

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

Dies ruft die TinyMCE Plugin Manager-Klasse auf, die wir verwenden können, um eine Reihe von TinyMCE-Plugin-bezogenen Aktionen durchzuführen. Insbesondere fügen wir unser Plugin mit der add-Funktion zu TinyMCE hinzu.

Dies akzeptiert zwei Elemente; den Namen des Plugins (custom_link_class) und eine anonyme Funktion.

Wenn Sie mit dem Konzept von Funktionen in der Programmierung vertraut sind, ist eine anonyme Funktion einfach eine Funktion ohne Namen. Zum Beispiel ist function foobar() { ... } eine Funktion, die wir an einer anderen Stelle in unserem Code mit foobar() aufrufen könnten.

Mit einer anonymen Funktion können wir diese Funktion nicht an anderer Stelle in unserem Code aufrufen – sie wird nur an dem Punkt aufgerufen, an dem die add() Funktion aufgerufen wird.

Speichern Sie Ihre Javascript-Datei und bearbeiten Sie dann eine Seite oder einen Beitrag, um den visuellen Editor anzuzeigen. Wenn alles funktioniert hat, sehen Sie die Symbolleiste:

Im Moment wurde unsere Schaltfläche noch nicht zu dieser Symbolleiste hinzugefügt. Das liegt daran, dass wir TinyMCE nur mitgeteilt haben, dass wir ein benutzerdefiniertes Plugin sind. Wir müssen TinyMCE jetzt mitteilen, was es tun soll – das heißt, eine Schaltfläche zur Symbolleiste hinzufügen.

Aktualisieren Sie Ihre Javascript-Datei und ersetzen Sie Ihren vorhandenen Code durch Folgendes:

(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',
		});	
	});
})();

Beachten Sie, dass unsere anonyme Funktion zwei Argumente hat. Das erste ist die editor-Instanz – dies ist der TinyMCE Visual Editor. Auf die gleiche Weise, wie wir verschiedene Funktionen auf dem PluginManager aufrufen können, können wir auch verschiedene Funktionen auf dem editor aufrufen. In diesem Fall rufen wir die Funktion addButton auf, um eine Schaltfläche zur Symbolleiste hinzuzufügen.

Speichern Sie Ihre Javascript-Datei und kehren Sie zu Ihrem visuellen Editor zurück. Auf den ersten Blick scheint sich nichts geändert zu haben. Wenn Sie jedoch den Mauszeiger über die rechte Seite des rechtesten Symbols in der obersten Reihe bewegen, sollte ein Tooltip erscheinen:

Wir haben erfolgreich eine Schaltfläche zur Symbolleiste hinzugefügt, aber sie benötigt ein Bild. Fügen Sie den folgenden Parameter zur addButton-Funktion unterhalb der Zeile title: hinzu:

image: url + '/icon.png',

url is the URL to our plugin. This is handy if we want to reference an image file within our plugin folder, as we can append the image file name to the URL. In this case, we’ll need an image called icon.png in our plugin’s folder. Use the below icon:

Reload our Visual Editor, and you’ll now see your button with the icon:

Definieren eines auszuführenden Befehls

Im Moment passiert nichts, wenn Sie auf die Schaltfläche klicken. Fügen wir TinyMCE einen Befehl hinzu, der ihm sagt, was er tun soll, wenn unsere Schaltfläche angeklickt wird.

Fügen Sie in unserer Javascript-Datei den folgenden Code unterhalb des Endes des editor.addButton Abschnitts hinzu:

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

Laden Sie unseren visuellen Editor neu, klicken Sie auf den Button und eine Benachrichtigung wird angezeigt, die bestätigt, dass wir gerade auf den Button geklickt haben:

Ersetzen wir den Alert durch eine Eingabeaufforderung, die den Benutzer nach dem Link fragt, den er um den ausgewählten Text im visuellen Editor wickeln möchte:

// 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, '<a class="button" href="' + result + '">' + text + '</a>');
});

Dieser Codeblock führt einige Aktionen aus.

Zuerst prüfen wir, ob der Benutzer Text zum Verlinken im Visual Editor ausgewählt hat. Wenn nicht, wird eine Warnung angezeigt, die ihn auffordert, Text zum Verlinken auszuwählen.

Als Nächstes bitten wir sie, einen Link einzugeben, und prüfen erneut, ob sie dies getan haben. Wenn sie abgebrochen haben oder nichts eingegeben haben, tun wir nichts weiter.

Schließlich rufen wir die Funktion execCommand auf dem TinyMCE-Editor auf, speziell mit der Aktion mceReplaceContent. Dies ersetzt den ausgewählten Text durch unseren HTML-Code, der einen Ankerlink mit der Klasse „button“ enthält und den vom Benutzer ausgewählten Text verwendet.

Wenn alles funktioniert hat, sehen Sie, dass Ihr ausgewählter Text nun in den Ansichten Visueller Editor und Text verlinkt ist, wobei die Klasse auf button gesetzt ist:

Zusammenfassung

Wir haben erfolgreich ein WordPress-Plugin erstellt, das einen Button zum TinyMCE-visuellen Editor in WordPress hinzufügt. Dieses Tutorial hat auch einige Grundlagen der TinyMCE-API und der für TinyMCE-Integrationen verfügbaren WordPress-Filter behandelt.

Wir haben Code hinzugefügt, sodass, wenn ein Benutzer auf unsere benutzerdefinierte Schaltfläche klickt, er aufgefordert wird, Text im visuellen Editor auszuwählen, den er dann mit einer URL seiner Wahl verknüpfen kann. Schließlich ersetzt unser Plugin den ausgewählten Text durch eine verknüpfte Version, die eine benutzerdefinierte CSS-Klasse namens button enthält.

Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie man ein WordPress TinyMCE-Plugin erstellt. Sie möchten vielleicht auch unseren Leitfaden lesen, wie man ein standortspezifisches WordPress-Plugin erstellt.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.