Hinzufügen einer benutzerdefinierten Funktionalität zum visuellen Editor von WordPress

Key Takeaways

• Der visuelle Editor von WordPress, der vom Tinymce -Editor -Steuerelement angetrieben wird, kann so angepasst werden, dass eindeutige Funktionen hinzugefügt werden, z.
Um benutzerdefinierte Funktionen hinzuzufügen, müssen Sie in Ihrer WordPress -Website ein Tinymce -Plugin erstellen, Tinymce -Aktionen und -filter registrieren und die Tinymce -Filter (MCE_EXTERNAL_PLUGINS und MCE_BUTTONS) zum Laden externer Tinymce -Plugins und Fügen/Entfernen von Schaltflächen zu Tinymce Toolbar verwenden. .
benutzerdefinierte Funktionalität kann auch hinzugefügt werden, indem ein JavaScript -Plugin erstellt wird, das Tinymce erstellt, wie Sie die Schaltfläche ausgeben und was zu tun ist, wenn Sie klicken. Dies beinhaltet die Verwendung der Tinymce Plugin Manager -Klasse, um das Plugin zu Tinymce hinzuzufügen, die Schaltfläche mit der Funktion hinzufügen zu registrieren und einen Befehl mithilfe der Funktion addCommand zu registrieren.
Es ist möglich, den WordPress Visual Editor ohne Codierung mithilfe von Plugins anzupassen. Einige beliebte Plugins für diesen Zweck sind Tinymce Advanced, WP Edit und Ultimate Tinymce.

Der Content -Editor ist ein wichtiger Teil von WordPress. Dadurch können Benutzer ihre Inhalte, Galerien und Videos in einem

visuellen wysiwyg (was Sie sehen, was Sie erhalten) erstellen und verwalten).

Es wird auch mit einem

text Ansicht geliefert, mit der Benutzer HTML in ihren Inhalt einfügen oder ändern können.

Der WordPress Visual Editor wird von der Tinymce -Editor -Steuerung angetrieben, die die WYSIWYG -Ansicht sowie die Formatierungsschaltflächen bietet:

Dank der Tinymce -API und der Filterhaken von WordPress können wir dem WordPress Visual Editor unsere eigene Funktionalität hinzufügen. Insbesondere untersuchen wir, wie Sie ein benutzerdefiniertes Tinymce -Plugin erstellen und registrieren, das ausgewählten Text in einer CSS -Klasse einbindet.

Erstellen des Tinymce -Plugins

Erstellen Sie in Ihrer WordPress-Website den Ordner WP-Content/Plugins/Tinymce-Custom-Klasse.

wir speichern hier die Dateien unseres Plugins. Erstellen Sie also als nächstes eine Datei namens Tinymce-Custom-classe.php mit dem folgenden Code:

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

Dies gibt WordPress einige Informationen zu unserem Plugin und richtet unser Konstrukt ein, in dem wir unsere Tinymce -Aktionen und -Filter registrieren.

WordPress Tinymce Filter

Tinymce bietet zwei Schlüsselfilter für die Registrierung eines Elements in der Symbolleiste zum visuellen Editor:

MCE_EXTERNAL_PLUGINS: Zum Laden externer Tinymce -Plugins (https://codex.wordpress.org/plugin_api/filter_reference/mce_external_plugins)
mce_buttons: Used to add/remove buttons to the TinyMCE toolbar (https://codex.wordpress.org/Plugin_API/Filter_Reference/mce_buttons,
• mce_buttons_2,mce_buttons_3,_mce_buttons_4)

Bevor wir diese Filter anrufen, möchten wir überprüfen, ob wir uns in den Bildschirmen der WordPress -Administration befinden. Fügen Sie dem __construct den folgenden Code hinzu:

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

Nächst

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

Dies überprüft, ob der aktuelle im WordPress -Benutzer angemeldete Benutzer Beiträge oder Seiten bearbeiten kann. Wenn dies nicht der Fall ist, hat es keinen Sinn, unser Tinymce -Plugin für diesen Benutzer zu registrieren, da er den visuellen Editor nie sehen wird.

Wir überprüfen dann, ob der Benutzer den visuellen Editor verwendet, da einige WordPress -Benutzer dies über

Benutzer> Ihr Profil ausschalten. Wenn der Benutzer den visuellen Editor nicht verwendet, geben wir die Funktion zurück (beenden Sie), da wir nichts anderes tun müssen.

Wenn die oben genannten Überprüfungen bestehen, sind die beiden Tinymce -WordPress -Filter registriert - mce_external_plugins und mce_buttons.

Der erste Filter - MCE_External_plugins - ermöglicht es uns, die Tinymce JavaScript -Plugin -Datei zu registrieren, die mit dem visuellen Editor interagiert. Fügen wir einen Funktionsaufruf für diesen Filter in unserer Klasse hinzu:

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

Hier registrieren wir eine JavaScript -Datei im $ plugin_array, das alle Tinymce JavaScript -Plugins enthält.

Der zweite Filter - MCE_BUTTONS - sagt Tinymce, dass wir eine Schaltfläche im visuellen Editor registrieren möchten. Lassen Sie uns erneut einen Funktionsaufruf für diesen Filter in unserer Klasse hinzufügen:

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

Dies registriert den programmatischen Namen für unsere Tinymce -Taste (Custom_class).

Erstellen des JavaScript -Plugins

Als wir mce_external_plugins angerufen haben, haben wir uns auf eine JavaScript -Datei verwiesen. Wir müssen diese Datei jetzt erstellen und einen JavaScript -Code hinzufügen. Dadurch wird Tinymce angezeigt, wie die Schaltfläche ausgibt und was zu tun ist, wenn er geklickt wird.

Erstellen Sie eine neue Datei im Plugin-Ordner namens Tinymce-Custom-class.js, wobei der folgende Code einfügt:

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

Diese JavaScript -Funktion führt einige Aktionen aus:

Es nennt die Tinymce -Plugin -Manager -Klasse, mit der wir eine Reihe von Tinymce -Plugin -Aktionen ausführen können. Insbesondere fügen wir unser Plugin mit der Funktion hinzufügen zu Tinymce hinzu.
In der Routine hinzufügen haben wir über die Editor -Instanz auf den visuellen Editor zugreifen. Wir registrieren unsere Schaltfläche mit der Funktion addbutton, die aus einem Titel, Befehl und Symbolbild besteht.
Schließlich registrieren wir einen Befehl mit der Funktion addCommand, die eine Warnung anzeigt, die uns mitteilt, wann unsere Schaltfläche geklickt wurde.

Wir müssen auch das Icon.png -Bild in unseren Plugin -Ordner aufnehmen - Dies ist das Symbolbild, das für die Taste verwendet wird:

Speichern Sie Ihren Code und aktivieren Sie Ihr Plugin in WordPress -Administration> Plugins.

Erstellen oder bearbeiten Sie als nächstes eine Seite oder einen Beitrag, und Sie werden hoffentlich Ihre Schaltfläche mit dem Symbol sehen:

Klicken Sie auf die Schaltfläche, und Sie sehen die Schaltfläche

Klicken Sie auf! Alarm:

Definieren eines Befehls zum Ausführen

Ersetzen wir die Warnung durch Eingabeaufforderung und fragen Sie den Benutzer nach dem CSS -Klassennamen, den er im visuellen Editor um den ausgewählten Text einwickeln möchte:

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

Dieser Befehl führt ein paar geistige Überprüfungen aus, um sicherzustellen, dass der Benutzer einen Text ausgewählt hat, einen CSS -Klassennamen eingegeben und den Vorgang nicht abgesagt hat.

Wenn diese Überprüfungen bestehen, führen wir die ExecCommand -Funktion des Editors aus, um den ausgewählten Text durch den ausgewählten Text zu ersetzen, der in einem Spann -Tag eingewickelt ist, das die inputierte CSS -Klasse enthält.

Wenn alles funktioniert hat, wechseln Sie zur Ansicht "Text", und Sie sehen, dass Ihr ausgewählter Text jetzt in ein Span -Tag eingewickelt ist:

Schlussfolgerung

Wir haben ein WordPress -Plugin erstellt, um dem Tinymce Visual Editor eine Schaltfläche hinzuzufügen. In diesem Prozess haben wir die Filter, die WordPress verwendet, für die Integration mit Tinymce sowie den JavaScript -Code untersucht, der zum Hinzufügen einer Schaltfläche und beim Klicken eine Aktion erforderlich ist.

Um den vollständigen Quellcode herunterzuladen, besuchen Sie das GitHub -Repository oder den Download -Link Direkte ZIP -Datei.

Im nächsten Artikel werden wir einige fortgeschrittenere Schritte behandeln, die wir unternehmen können, um unser Tinymce -Plugin weiter anzupassen.

häufig gestellte Fragen (FAQs) zum Hinzufügen einer benutzerdefinierten Funktionalität zum visuellen Editor

Wie kann ich dem visuellen Editor von WordPress benutzerdefinierte Schaltflächen hinzufügen? Mit dieser API können Sie der Symbolleiste neue Schaltflächen hinzufügen und ihre Funktionalität definieren. Sie können eine neue Plugin -Datei im Plugins -Verzeichnis Ihrer WordPress -Installation erstellen und den Filter "MCE_BUTTONS" verwenden, um Ihre Schaltfläche hinzuzufügen. Dann können Sie den Filter "mce_external_plugins" verwenden, um die JavaScript -Datei Ihres Plugins zu laden, die die Funktionalität der Schaltfläche definiert. Passen Sie den WordPress Visual Editor ohne Codierung mithilfe von Plugins an. Es stehen mehrere Plugins zur Verfügung, mit denen Sie Tasten in der Symbolleiste hinzufügen, entfernen oder neu ordnen können, das Erscheinungsbild des Editors ändern und benutzerdefinierte Stile und Formate hinzufügen können. Einige beliebte Plugins für diesen Zweck sind Tinymce Advanced, WP Edit und Ultimate Tinymce. Editor mit dem Filter "Tiny_MCE_BEFORE_INIT". Mit diesem Filter können Sie das Tinymce -Einstellungsarray ändern, das eine Option "style_formats" enthält. Sie können Ihre benutzerdefinierte Stile dieser Option als Array von Arrays hinzufügen, wobei jeder einen Stil definiert. Jeder Stil sollte einen Titel "," Block "," Klassen "und" Wrapper "enthalten.

Was ist Tinymce und wie bezieht es sich mit dem WordPress Visual Editor? Es ist die zugrunde liegende Software, die den visuellen Editor von WordPress versorgt. Wenn Sie die Tinymce -API verstehen und verwenden, können Sie dem visuellen Editor von WordPress benutzerdefinierte Funktionen hinzufügen. zum visuellen Editor von WordPress mit dem Filter "MCE_CSS". Mit diesem Filter können Sie dem Editor zusätzliche CSS -Dateien hinzufügen. Sie können eine CSS -Datei erstellen, die Ihre benutzerdefinierte Schriftart importiert und eine Klasse definiert, die sie verwendet ? Aufgrund der kleineren Bildschirmgröße können einige Symbolleistenschaltflächen in der Dropdown -Down -Stelle von 'Kitchen Speek' versteckt sein. Benutzerdefinierte Formate zum WordPress Visual Editor mit dem Filter "Tiny_MCE_BEFORE_INIT" und der Option "style_formats". Sie können Ihre benutzerdefinierten Formate als Array von Arrays definieren, die jeweils ein Format definieren. Jedes Format sollte eine Eigenschaft "Titel", "Inline", "Klassen" und "Wrapper" enthalten. Editor, indem Sie zu Benutzern> Ihr Profil im WordPress -Administratorbereich gehen und den visuellen Editor deaktivieren, wenn Sie das Schreiben deaktivieren. Sie können Shortcodes im WordPress Visual Editor verwenden. Geben Sie einfach den Shortcode in den Editor ein und er wird verarbeitet, wenn der Beitrag angezeigt wird. Visueller Editor mit der Schaltfläche "Tabelle" in der Symbolleiste. Wenn diese Taste nicht sichtbar ist, müssen Sie möglicherweise ein Plugin wie Tinymce Advanced installieren, um es hinzuzufügen.

Das obige ist der detaillierte Inhalt vonHinzufügen einer benutzerdefinierten Funktionalität zum visuellen Editor von WordPress. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!