WordPress 3.9+ TinyMCE 4 Tweaks: Hinzufügen von Stilen, Schaltflächen, Schriftarten, Dropdowns und Popups

Eines meiner Lieblingsupdates in WordPress 3.9 war das Erstellen des TinyMCE Version 4.0-Kerns. Das neue TinyMCE sieht sauberer aus (passt wirklich zum WP-Dashboard) und verfügt über einige wirklich schöne zusätzliche Funktionen. Viele meiner alten Themen und Plugins mussten aktualisiert werden, um mit dem neuen TinyMCE zu arbeiten, also habe ich einige Zeit damit verbracht, mich umzuschauen die API und ein paar coole Sachen herauszufinden. Im Folgenden werde ich Ihnen einige Beispiele geben, wie Sie die Funktionalität des TinyMCE erweitern können. Ich werde Sie nicht durch alle Schritte oder die genaue Bedeutung des Codes führen (dies ist für Entwickler gedacht), sondern Ihnen den genauen Code zur Verfügung stellen, den Sie kopieren / in Ihr Thema oder Plugin einfügen und dann entsprechend anpassen können.

Hinzufügen von Schriftgröße und Schriftfamilienauswahl

Standardmäßig werden die benutzerdefinierten Schriftarten und Schriftgrößen nicht zum TinyMCE-Editor hinzugefügt. Mit der folgenden Funktion werden diese beiden Dropdowns ganz links im Editor in der zweiten Zeile hinzugefügt. Ändern Sie einfach die Position “mce_buttons_2”, wenn Sie es in einer anderen Zeile haben möchten (Beispiel: Verwenden Sie “mce_buttons_3” für die 3. Zeile)..

// Schriftgröße und Schriftfamilienauswahl im Editor aktivieren
if (! function_exists ('wpex_mce_buttons')) {
Funktion wpex_mce_buttons ($ button) {
array_unshift ($ button, 'fontselect'); // Schriftart hinzufügen
array_unshift ($ button, 'fontsizeselect'); // Schriftgröße hinzufügen Wählen Sie
$ button zurückgeben;
}}
}}
add_filter ('mce_buttons_2', 'wpex_mce_buttons');

Hinzufügen von benutzerdefinierten Schriftgrößen

Standardmäßig sind die Schriftgrößen auf pt-Werte eingestellt, was nicht immer ideal ist. Ich bevorzuge die Verwendung von Pixelwerten (12px, 13px, 14px, 16px usw.) und die Bereitstellung weiterer Optionen für die Flexibilität der Reibe. Die folgende Funktion ändert die Standardoptionen für die Schriftgröße in der Dropdown-Auswahl.

// Passen Sie die Schriftgrößen des mce-Editors an
if (! function_exists ('wpex_mce_text_sizes')) {
Funktion wpex_mce_text_sizes ($ initArray) {
$ initArray ['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
return $ initArray;
}}
}}
add_filter ('tiny_mce_before_init', 'wpex_mce_text_sizes');

Hinzufügen von benutzerdefinierten Schriftarten

Die Standardschriftartenoptionen in der Auswahl der Schriftfamilie sind standardmäßig alle “web-sicheren” Schriftarten. Was ist jedoch, wenn Sie der Auswahl weitere Schriftarten hinzufügen möchten? Vielleicht ein paar Google Fonts? Wir werden uns das folgende Beispiel ganz einfach ansehen.

// Benutzerdefinierte Schriftarten zur Liste der Schriftarten hinzufügen
if (! function_exists ('wpex_mce_google_fonts_array')) {
Funktion wpex_mce_google_fonts_array ($ initArray) {
$ initArray ['font_formats'] = 'Lato = Lato; Andale Mono = Andale Mono, Zeiten; Arial = Arial, Helvetica, serifenlos; Arial Black = Arial Black, Avantgarde; Book Antiqua = Buch Antiqua, Palatino; Comic Sans MS = Comic ohne MS, serifenlos; Kurier neu = Kurier neu, Kurier; Georgia = Georgia, Palatino; Helvetica = Helvetica; Impact = Impact, Chicago; Symbol = Symbol; Tahoma = Tahoma, Arial, Helvetica, Sans-Serif; Terminal = Terminal, Monaco; Times New Roman = Times New Roman, Times; Trebuchet MS = Trebuchet MS, Genf; Verdana = Verdana, Genf; Webdings = Webdings; Wingdings = Wingdings, Zapf Dingbats ';
return $ initArray;
}}
}}
add_filter ('tiny_mce_before_init', 'wpex_mce_google_fonts_array');

Beachten Sie, wie ich der Liste im obigen Code “Lato” hinzugefügt habe? So einfach ist das! In meinem Total WordPress-Thema durchlaufe ich tatsächlich alle benutzerdefinierten Schriftarten, die auf der Website verwendet werden, wie im Themenbereich definiert, und füge sie dem Auswahlfeld hinzu, damit sie auch beim Bearbeiten Ihrer Beiträge / Seiten verfügbar sind (süß). Der Code zeigt jedoch NUR die Schriftfamilie in der Dropdown-Liste an, in der das Skript nicht auf magische Weise geladen wird, sodass Sie beim Ändern Ihres Textes im Editor tatsächlich sehen können, wie die benutzerdefinierte Schriftart darauf angewendet wird. Dies ist der folgende Code!

// Google Scripts zur Verwendung mit dem Editor hinzufügen
if (! function_exists ('wpex_mce_google_fonts_styles')) {
Funktion wpex_mce_google_fonts_styles () {
$ font_url = 'http://fonts.googleapis.com/css?family=Lato:300,400,700';
add_editor_style (str_replace (',', '% 2C', $ font_url));
}}
}}
add_action ('init', 'wpex_mce_google_fonts_styles');

Aktivieren Sie das Dropdown-Menü Formate (Stile) und fügen Sie neue Stile hinzu

Erinnern Sie sich an die Dropdown-Liste “Stile” in WP 3.8? Das war ziemlich cool! Sie können es verwenden, um einige coole Klassen hinzuzufügen, die im Post-Editor verwendet werden sollen (ich verwende es im WPExplorer tatsächlich für Schaltflächen, farbige Bereiche, Kästchen usw.). In WP 3.9 können Sie weiterhin Stile hinzufügen. Es wurde jedoch im neuen TinyMCE 4.0 in “Formate” umbenannt, sodass es ein wenig anders funktioniert. Im Folgenden finden Sie ein Beispiel für das Aktivieren der Dropdown-Liste “Formate” und das Hinzufügen einiger neuer Elemente.

Aktivieren Sie das Dropdown-Menü Formate

Dies geschieht tatsächlich auf die gleiche Weise wie vor WP 3.9, aber ich teile es, falls Sie nicht wussten, wie es geht.

// Dropdown-Menü Formate zu MCE hinzufügen
if (! function_exists ('wpex_style_select')) {
Funktion wpex_style_select ($ Tasten) {
array_push ($ button, 'styleselect');
$ button zurückgeben;
}}
}}
add_filter ('mce_buttons', 'wpex_style_select');

Neue Elemente zu Formaten hinzufügen

Das Hinzufügen neuer Elemente ist sehr einfach. Bitte beachten Sie, wie ich “$ settings [‘style_formats_merge’] = true;” Mit dem folgenden Code wird sichergestellt, dass Ihre Änderungen zusammen mit anderen zum Dropdown-Menü “Formate” hinzugefügt werden. Überschreiben Sie nicht das gesamte Element (möglicherweise möchten auch andere Plugins davon Gebrauch machen)..

// Neue Stile zum Dropdown-Menü "Formate" von TinyMCE hinzufügen
if (! function_exists ('wpex_styles_dropdown')) {
Funktion wpex_styles_dropdown ($ settings) {

// Array neuer Stile erstellen
$ new_styles = array (
Array (
'title' => __ ('Benutzerdefinierte Stile', 'wpex'),
'items' => array (
Array (
'title' => __ ('Theme Button', 'wpex'),
'Selektor' => 'a',
'classes' => 'theme-button'
),
Array (
'title' => __ ('Highlight', 'wpex'),
'inline' => 'span',
'Klassen' => 'Text-Highlight',
),
),
),
);

// Alte und neue Stile zusammenführen
$ settings ['style_formats_merge'] = true;

// Neue Stile hinzufügen
$ settings ['style_formats'] = json_encode ($ new_styles);

// Neue Einstellungen zurückgeben
$ settings zurückgeben;

}}
}}
add_filter ('tiny_mce_before_init', 'wpex_styles_dropdown');

Hinzufügen einer einfachen MCE-Schaltfläche

Das Hinzufügen einer neuen Schaltfläche zum TinyMCE-Editor ist besonders nützlich für Shortcodes, da Sie sich als Benutzer keine Shortcodes merken müssen. Sie können einfach auf eine Schaltfläche klicken und sie einfügen. Ich sage nicht, dass Sie dem TinyMCE Hunderte von Schaltflächen für alle Ihre Shortcodes hinzufügen sollen (ich hasse es, wenn Entwickler dies tun, es ist eine so schlechte Praxis und sieht schrecklich aus), aber wenn Sie 1 oder einige hinzufügen, lasse ich es passieren �� Wenn Sie Wenn Sie eine Reihe hinzufügen möchten, sollten Sie ein Untermenü erstellen, wie im folgenden Abschnitt erläutert.

PHP-Code – Deklarieren Sie das neue MCE-Plugin in WP

Dieser Code erklärt, dass Ihr neues MCE-Plugin den Speicherort der Javascript-Datei “mce-button.js” so ändern muss, dass er mit dem Speicherort Ihrer Datei übereinstimmt (für den ich Ihnen den Code auch im nächsten Unterabschnitt geben werde) Benennen Sie das Präfix “my” offensichtlich in etwas Einzigartigeres um!

// Hängt Ihre Funktionen in die richtigen Filter ein
Funktion my_add_mce_button () {
// Benutzerberechtigungen überprüfen
if (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) {
Rückkehr;
}}
// Überprüfen Sie, ob WYSIWYG aktiviert ist
if ('true' == get_user_option ('rich_editing')) {
add_filter ('mce_external_plugins', 'my_add_tinymce_plugin');
add_filter ('mce_buttons', 'my_register_mce_button');
}}
}}
add_action ('admin_head', 'my_add_mce_button');

// Skript für neue Schaltfläche deklarieren
Funktion my_add_tinymce_plugin ($ plugin_array) {
$ plugin_array ['my_mce_button'] = get_template_directory_uri (). '/ js / mce-button.js';
return $ plugin_array;
}}

// Neue Schaltfläche im Editor registrieren
Funktion my_register_mce_button ($ button) {
array_push ($ button, 'my_mce_button');
$ button zurückgeben;
}}

JS-Code – Fügen Sie die Schaltfläche zum MCE hinzu

Dieser js-Code befindet sich in der js-Datei, die im obigen Snippet in der Funktion “symple_shortcodes_add_tinymce_plugin” registriert ist. Dies sollte eine neue Textschaltfläche mit der Aufschrift “Neue Schaltfläche” in Ihren Editor einfügen. Wenn Sie darauf klicken, wird der Text “WPExplorer.com is awesome!” Eingefügt. (Na sicher).

(function () {
tinymce.PluginManager.add ('my_mce_button', Funktion (Editor, URL) {
editor.addButton ('my_mce_button', {
Text: 'Neuer Button',
Symbol: falsch,
onclick: function () {
editor.insertContent ('WPExplorer.com ist großartig!');
}}
});
});
}) ();

Fügen Sie Ihrer neuen MCE-Schaltfläche ein benutzerdefiniertes Symbol hinzu

Oben habe ich Ihnen gezeigt, wie Sie eine neue Schaltfläche hinzufügen, die im Editor als “Neue Schaltfläche” angezeigt wird. Dies ist etwas lahm. Der geänderte Code zeigt Ihnen also, wie Sie Ihr eigenes benutzerdefiniertes Symbol hinzufügen.

Laden Sie ein Stylesheet mit Ihrem CSS

Verwenden Sie diese Funktion, um ein neues Stylesheet zur Verwendung in Ihrem Admin-Bereich zu laden. Einige Plugins / Themes fügen möglicherweise bereits ein Stylesheet hinzu. Wenn Ihr Theme / Plugin dies tut, überspringen Sie dies und fügen Sie einfach Ihr benutzerdefiniertes CSS hinzu und optimieren Sie das js (siehe unten)..

Funktion my_shortcodes_mce_css () {
wp_enqueue_style ('symple_shortcodes-tc', plugins_url ('/ css / my-mce-style.css', __FILE__));
}}
add_action ('admin_enqueue_scripts', 'my_shortcodes_mce_css');

Ihr benutzerdefiniertes CSS

Dies ist das CSS zum Hinzufügen des zuvor geladenen Stylesheets.

i.my-mce-icon {
Hintergrundbild: URL ('IHRE ICON-URL');
}}

Optimieren Sie Ihr Javascript

Ändern Sie nun einfach das zuvor hinzugefügte Javascript, um den Textparameter zu entfernen, und geben Sie ihm einen benutzerdefinierten Klassennamen, anstatt das Symbol auf false zu setzen.

(function () {
tinymce.PluginManager.add ('my_mce_button', Funktion (Editor, URL) {
editor.addButton ('my_mce_button', {
icon: 'my-mce-icon',
onclick: function () {
editor.insertContent ('WPExplorer.com ist großartig!');
}}
});
});
}) ();

Hinzufügen einer Schaltfläche mit Untermenü

Ich habe bereits erwähnt, dass das Hinzufügen einer Menge neuer Symbole zur TinyMCE-Leiste eine schlechte Idee ist (und das ist es auch). Sehen Sie sich also den folgenden Code an, um zu sehen, wie Sie das Javascript bearbeiten können, um ein Untermenü für Ihre benutzerdefinierte Schaltfläche anzuzeigen. Wenn Sie es in Aktion sehen möchten, schauen Sie sich meine an Symple Shortcodes Video.

(function () {
tinymce.PluginManager.add ('my_mce_button', Funktion (Editor, URL) {
editor.addButton ('my_mce_button', {
Text: 'Beispiel Dropdown',
Symbol: falsch,
Typ: 'Menubutton',
Speisekarte: [
{
Text: 'Punkt 1',
Speisekarte: [
{
Text: 'Unterpunkt 1',
onclick: function () {
editor.insertContent ('WPExplorer.com ist großartig!');
}}
}},
{
Text: 'Unterpunkt 2',
onclick: function () {
editor.insertContent ('WPExplorer.com ist großartig!');
}}
}}
]]
}},
{
Text: 'Punkt 2',
Speisekarte: [
{
Text: 'Unterpunkt 1',
onclick: function () {
editor.insertContent ('WPExplorer.com ist großartig!');
}}
}},
{
Text: 'Unterpunkt 2',
onclick: function () {
editor.insertContent ('WPExplorer.com ist großartig!');
}}
}}
]]
}}
]]
});
});
}) ();

Hinzufügen eines Popup-Fensters zu Ihrer Schaltfläche beim Klicken

Im obigen Beispiel stellen Sie möglicherweise fest, dass auf jeder Schaltfläche einfach der Text “WPExplorer.com is awesome!” Eingefügt wird. Was ist cool, aber was ist mit dem Erstellen eines Popup-Fensters, in dem ein Benutzer ändern kann, was in den Text eingefügt wird? Das wäre süß! Und es ist etwas, das ich zu Version 1.6 meiner Symple Shortcodes hinzugefügt habe, wodurch das Plugin viel benutzerfreundlicher wird.

(function () {
tinymce.PluginManager.add ('my_mce_button', Funktion (Editor, URL) {
editor.addButton ('my_mce_button', {
Text: 'Beispiel Dropdown',
Symbol: falsch,
Typ: 'Menubutton',
Speisekarte: [
{
Text: 'Punkt 1',
Speisekarte: [
{
Text: 'Popup',
onclick: function () {
editor.windowManager.open ({
Titel: 'Zufälligen Shortcode einfügen',
Körper: [
{
Typ: 'Textfeld',
name: 'textboxName',
Beschriftung: 'Textfeld',
Wert: '30'
}},
{
Typ: 'Textfeld',
name: 'multilineName',
Beschriftung: 'Mehrzeiliges Textfeld',
value: 'Hier kann man viel sagen',
mehrzeilig: wahr,
minBreite: 300,
minHöhe: 100
}},
{
Typ: 'Listbox',
name: 'listboxName',
Etikett: 'List Box',
'Werte': [
{Text: 'Option 1', Wert: '1'},
{Text: 'Option 2', Wert: '2'},
{Text: 'Option 3', Wert: '3'}
]]
}}
]],
onsubmit: Funktion (e) {
editor.insertContent ('[random_shortcode textbox = "' + e.data.textboxName + '" multiline = "' + e.data.multilineName + '" listbox = "' + e.data.listboxName + '"]');
}}
});
}}
}}
]]
}}
]]
});
});
}) ();

Das ist cool … jetzt was?

Gute Frage! Jetzt ist es an der Zeit, dass Sie diese fantastischen Verbesserungen vornehmen und etwas Episches erstellen oder Ihre Plugins / Themes aktualisieren, um mit dem neuen TinyMCE in WordPress 3.9 kompatibel zu sein. Lassen Sie mich wissen, was Sie in den Kommentaren unten kommen!