Verwenden des TinyMCE-Editors in WordPress [Guide]

Obwohl sie den Namen nicht kennen, ist jeder, der WordPress verwendet, mit der TinyMCE-Editor. Es ist der Editor, den Sie beim Erstellen oder Bearbeiten Ihres Inhalts verwenden - der mit den Schaltflächen zum Erstellen von fettem Text, Überschriften, Textausrichtung usw. Das ist es, was wir uns in diesem Beitrag ansehen werden, und ich werde es dir zeigen wie Sie Funktionalität hinzufügen können und wie Sie es in Ihren Plugins verwenden können.

Der Editor basiert auf einem plattformunabhängigen Javascript-System namens TinyMCE, das in einer Reihe von Projekten im Web verwendet wird. Es verfügt über eine großartige API, mit der Sie in WordPress eigene Schaltflächen erstellen und an anderen Stellen in WordPress hinzufügen können.

Verfügbare Schaltflächen hinzufügen

WordPress verwendet einige in TinyMCE verfügbare Optionen, um bestimmte Schaltflächen zu deaktivieren, beispielsweise hochgestellte, tiefgestellte und horizontale Regeln, um die Benutzeroberfläche zu bereinigen. Sie können ohne großen Aufwand wieder hinzugefügt werden.

Der erste Schritt ist das Erstellen eines Plugins. Werfen Sie einen Blick auf den WordPress-Codex. Kurz gesagt, Sie können einen Ordner namens "my-mce-plugin" im Ordner "wp-content / plugins" erstellen. Erstellen Sie eine Datei mit demselben Namen und einer PHP-Erweiterung: mein-mce-plugin.php.

Fügen Sie in diese Datei Folgendes ein:

  
Wenn Sie fertig sind, sollten Sie dieses Plugin in WordPress auswählen und aktivieren können. Der gesamte Code kann ab sofort in diese Datei eingefügt werden.
 
Also zurück zu einige eingebaute, aber versteckte Tasten aktivieren. Hier ist der Code, mit dem wir die drei Tasten aktivieren können, die ich erwähnt habe:
 
 add_filter ('mce_buttons_2', 'my_tinymce_buttons'); function my_tinymce_buttons ($ buttons) $ buttons [] = 'hochgestellt'; $ buttons [] = 'tiefgestellt'; $ Tasten [] = hr; $ -Tasten zurückgeben;  
 
 
 
Um herauszufinden, welche Schaltflächen hinzugefügt werden können und wie sie bezeichnet werden, lesen Sie die Liste der Steuerelemente in der TinyMCE-Dokumentation.
 
Eigene Buttons erstellen
 
Wie wäre es, wenn Sie unsere eigenen Buttons von Grund auf erstellen? Viele Websites verwenden Prism zur Code-Hervorhebung, bei der Codesegmente mit einem sehr semantischen Ansatz markiert werden. Sie müssen Ihren Code darin einpacken  und 
 Tags, etwa so:
 
$ variable = 'Wert'
 
Lassen Sie uns einen Button erstellen, der dies für uns erledigt!
 
Dies ist ein dreistufiger Prozess. Sie müssen eine Schaltfläche hinzufügen, eine Javascript-Datei laden und tatsächlich den Inhalt der Javascript-Datei schreiben. Lass uns anfangen!
 
Das Hinzufügen der Schaltfläche und das Laden der Javascript-Datei ist ziemlich unkompliziert. Hier ist der Code, den ich dazu verwendet habe:
 
 add_filter ('mce_buttons', 'pre_code_add_button'); Funktion pre_code_add_button ($ buttons) $ buttons [] = 'pre_code_button'; $ -Tasten zurückgeben;  add_filter ('mce_external_plugins', 'pre_code_add_javascript'); Funktion pre_code_add_javascript ($ plugin_array) $ plugin_array ['pre_code_button'] = get_template_directory_uri (). "/tinymce-plugin.js"; return $ plugin_array;  
 
Wenn ich Tutorials dazu sehe, sehe ich häufig 2 Probleme.
 
Sie vernachlässigen das zu erwähnen Der in der Funktion pre_code_add_button () hinzugefügte Schaltflächenname muss mit dem Schlüssel für die $ plugin_array-Variable in der Funktion pre_code_add_javascript () übereinstimmen. Wir werden auch müssen Verwenden Sie dieselbe Zeichenfolge in unserem Javascript später.
 
Einige Tutorials Verwenden Sie einen zusätzlichen admin_head-Hook, um alles zusammenzufassen. Dies funktioniert zwar, ist aber nicht erforderlich, und da der Codex ihn nicht verwendet, sollte er wahrscheinlich vermieden werden.
 
Der nächste Schritt ist, Javascript zu schreiben, um unsere Funktionalität zu implementieren. Hier ist was ich bekommen habe 
 und  Tags werden alle auf einmal ausgegeben.
 
 (function () tinymce.PluginManager.add ('pre_code_button', Funktion (Editor, URL)) editor.addButton ('pre_code_button', Text: 'Prism', Symbol: false, onclick: function () var selected = tinyMCE.activeEditor.selection.getContent (); var content = '
'+ ausgewählt +'
'; editor.insertContent (content + "\ n"); ); ); ) (); 
 
Das meiste davon hängt davon ab, wie ein TinyMCE-Plugin kodiert werden soll. Informationen dazu finden Sie in der TinyMCE-Dokumentation. Für den Moment müssen Sie nur wissen, dass dies der Fall ist der Name Ihres Buttons (pre_code_button) sollte in Zeile 2 und 3 verwendet werden. Der Wert von "Text" in Zeile 4 wird angezeigt, wenn Sie kein Symbol verwenden (wir werden in Kürze weitere Symbole hinzufügen.).
 
Die Onclick-Methode legt fest, was diese Schaltfläche bewirkt, wenn sie angeklickt wird. Ich möchte es verwenden, um ausgewählten Text innerhalb der zuvor besprochenen HTML-Struktur einzuwickeln.
 
Der ausgewählte Text kann mit übernommen werden tinyMCE.activeEditor.selection.getContent (). Dann wickle ich die Elemente ein und füge sie ein, wobei der hervorgehobene Inhalt durch das neue Element ersetzt wird. Ich habe auch eine neue Zeile hinzugefügt, damit ich nach dem Codeelement problemlos schreiben kann.
 
Wenn Sie ein Symbol verwenden möchten, empfiehlt es sich, eines aus dem Dashicons-Set auszuwählen, das mit WordPress ausgeliefert wird. Die Developer Reference bietet ein hervorragendes Werkzeug zum Finden von Symbolen und deren CSS / HTML / Glyph. Suchen Sie das Codesymbol und notieren Sie den Unicode darunter: f475.
 
Wir müssen ein Stylesheet an unser Plugin anhängen und dann einen einfachen Stil hinzufügen, um unser Symbol anzuzeigen. Als Erstes fügen wir unseren Stil zu WordPress hinzu:
 
 add_action ('admin_enqueue_scripts', 'pre_code_styles'); Funktion pre_code_styles () wp_enqueue_style ('pre_code_button', plugins_url ('/style.css', __FILE__));  
 
Gehen Sie zurück zum Javascript und ersetzen Sie neben dem Symbol in der Funktion addButton “falsch” mit einer Klasse, die Sie möchten, dass Ihr Knopf - ich habe verwendet pre_code_button.
 
Erstellen Sie nun die Datei style.css in Ihrem Plugin-Verzeichnis und fügen Sie das folgende CSS hinzu:
 
 i.mce-i-pre_code_button: before font-family: dashicons; Inhalt: "\ f475";  
 
 
 
Beachten Sie, dass die Schaltfläche das empfängt mce-i- [deine Klasse hier] Klasse, mit der Sie Stile auswählen und hinzufügen können. Geben Sie die Schriftart als Dashicons und den Inhalt mit dem Unicode-Wert von früher an.
 
TinyMCE an anderer Stelle verwenden
 
Plugins erstellen häufig Textbereiche für die Eingabe längerer Texte, Wäre es nicht toll, wenn wir TinyMCE auch dort einsetzen könnten? Natürlich können wir das und es ist ziemlich einfach. Mit der Funktion wp_editor () können Sie eine beliebige Stelle in admin ausgeben. So sieht es aus:
 
wp_editor ($ initial_content, $ element_id, $ settings);
 
Der erste Parameter legt den Anfangsinhalt für die Box fest. Dies kann zum Beispiel zum Laden einer Option aus der Datenbank verwendet werden. Der zweite Parameter legt die ID des HTML-Elements fest. Der dritte Parameter ist ein Array von Einstellungen. Informationen zu den genauen Einstellungen, die Sie verwenden können, finden Sie in der Dokumentation zum WP-Editor.
 
Die wichtigste Einstellung ist die Textfeldname. Dadurch wird das Namensattribut des Textbereichselements aufgefüllt, sodass Sie die Daten problemlos speichern können. So sieht mein Editor aus, wenn er auf einer Optionsseite verwendet wird:
 
$ settings = array ('textarea_name' => 'buyerbio');
 
wp_editor (get_option ('buyer_bio'), 'buyer_bio', $ settings);
 
Dies entspricht dem Schreiben des folgenden Codes, der zu einem einfachen Textbereich führen würde:
 
<?php get_option( 'buyer_bio' ) ?>
 
Fazit
 
Der TinyMCE-Editor ist eine benutzerfreundliche Möglichkeit, Benutzern mehr Flexibilität bei der Eingabe von Inhalten zu ermöglichen. Dies ermöglicht es denjenigen, die ihren Inhalt nicht formatieren möchten, den Text einfach einzugeben und damit fertig zu werden, und diejenigen, die sich damit beschäftigen möchten, verbringen so viel Zeit, wie sie brauchen, um es richtig zu machen.
 
Das Erstellen neuer Schaltflächen und Funktionen kann auf sehr modulare Weise erfolgen, und wir haben gerade erst die Oberfläche der Möglichkeiten angekratzt. Wenn Sie ein besonders gutes TinyMCE-Plugin oder einen Anwendungsfall kennen, der Ihnen sehr geholfen hat, teilen Sie uns dies bitte in den Kommentaren mit!