Share
Höchstwahrscheinlich wissen Sie, dass WordPress mit dem HTML-WYSIWYG-Editor TinyMCE gebündelt ist. Die Vielzahl an Funktionen und die Möglichkeit, durch Plugins erweitert zu werden, machen ihn zum meistbenutzten WYSIWYG-Editor der Welt. WordPress nutzt jedoch nicht alle Funktionen. WordPress passt es an und behält nur Teile bei, die für Benutzer wirklich hilfreich sind, um die Benutzeroberfläche nicht durcheinander zu bringen. Das bedeutet auch, dass einige Funktionen, z. B. Schaltflächen, für Benutzer ausgeblendet wurden. Sie können die verborgenen MCE-Tasten vollständig aktivieren. Normalerweise sind sie es Stylesheet, Sub, sup Tasten. Wenn auch die versteckten nicht Ihren Bedürfnissen entsprechen, müssen Sie ein TinyMCE-Plugin erstellen, um Ihr eigenes hinzuzufügen. In diesem Tutorial werde ich Sie durch die Grundlagen des Hinzufügens Ihrer WordPress-Editor-Schaltflächen führen, indem Sie ein TinyMCE-Plugin erstellen.
Wie bereits erwähnt, werden wir ein neues TinyMCE-Plugin erstellen, dessen Aufgabe darin besteht, die neuen Schaltflächen hinzuzufügen, die wir benötigen. Welche Knöpfe werden wir hinzufügen? Wir werden versuchen, zwei einfache Schaltflächen hinzuzufügen: Dropcap und kürzliche Posts, Die erste gibt Ihnen die Möglichkeit, einen ausgewählten Buchstaben in einen Großbuchstaben umzuwandeln, und in letzterer werden die letzten Beiträge angezeigt. Der Code generiert diese unten gezeigten Schaltflächen.
Erstellen wir einen neuen Ordner mit dem Namen Wptuts-Editor-Schaltflächen (Sie können es natürlich in etwas anderes ändern, wenn Sie möchten) in Ihrem Design-Verzeichnis (ich verwende TwentyTwelve). Erstellen Sie zwei neue Dateien, wptuts.php das ruft angepasste PHP auf, und die andere benannte wptuts-plugin.js wo sich die JavaScript-Codeausschnitte befinden. Schließlich öffnen Sie Ihr Thema Functions.php Datei und schließen Sie das neu erstellte wptuts.php Datei darin. Beachten Sie, dass Sie den Pfad genau definieren müssen:
Accentsconagua
erfordern ('wptuts-editor-buttons / wptuts.php'); Dann müssen wir etwas Code für diese beiden Tasten vorbereiten:
/ * Diesen Code in style.css hinzufügen * / .dropcap float: left; Schriftgröße: 80px; Polsterung rechts: 7px; Zeilenhöhe: 72px;
add_shortcode ('recent-posts', 'wptuts_recent_posts'); Funktion wptuts_recent_posts ($ atts) extract (shortcode_atts (array ('numbers' => '5',), $ atts)); $ rposts = new WP_Query (array ('posts_per_page' => $ numbers, 'orderby' => 'date')); if ($ rposts-> have_posts ()) $ html = 'kürzliche Posts
Wir gehen davon aus, dass, wenn Benutzer auf das Symbol klicken kürzliche Posts Wenn Sie auf die Schaltfläche klicken, wird im Browser ein Dialogfeld angezeigt, in dem Sie nach der Anzahl der Beiträge gefragt werden, die angezeigt werden sollen. Nachdem diese Nummer eingegeben wurde, füllt der Editor sie als Argument in den obigen Kurzcode. Wenn Sie beispielsweise sieben aktuelle Beiträge anzeigen möchten, wird der Kurzcode wie folgt generiert:
[Recent-posts numbers = "7" /]
Vorausgesetzt, wir hatten bereits das neue Plugin, müssen wir es bei WordPress registrieren, um es in den TinyMCE-Editor zu integrieren. Der Code wird unten gezeigt:
add_action ('init', 'wptuts_buttons'); Funktion wptuts_buttons () add_filter ("mce_external_plugins", "wptuts_add_buttons"); add_filter ('mce_buttons', 'wptuts_register_buttons'); Funktion wptuts_add_buttons ($ plugin_array) $ plugin_array ['wptuts'] = get_template_directory_uri (). "/wptuts-editor-buttons/wptuts-plugin.js"; return $ plugin_array; Funktion wptuts_register_buttons ($ buttons) array_push ($ buttons, 'dropcap', 'showrecent'); // dropcap ',' Recentposts geben $ buttons zurück; Der wichtige Filterhaken mce_external_plugins wird verwendet, um das neue Plugin an TinyMCE anzuhängen. Wir müssen eine Plugin-ID übergeben (wptuts) und die absolute URL zu unserer wptuts-plugin.js Datei. Das mce_buttons Mit hook wird dem TinyMCE-Editor mitgeteilt, welche Schaltflächen in unserem Plugin angezeigt werden sollen. Das Dropcap und Showrecent sind die ID-Werte dieser Schaltflächen, die wir erstellen möchten. Denken Sie daran, dass diese Werte später verwendet werden.
Im Allgemeinen denke ich, dass der beste Weg, etwas auf einer Plattform zu erweitern oder zu entwickeln, die Dokumentation für diese Plattform ist. TinyMCE hat ein eigenes Wiki, das Sie möglicherweise nützlich finden. Nachfolgend ein Beispiel für die Erstellung eines TinyMCE-Plugins: Wir haben den folgenden Initialisierungscode:
(function () tinymce.create ('tinymce.plugins.Wptuts', / ** * Initialisiert das Plugin. Dieses wird ausgeführt, nachdem das Plugin erstellt wurde. * Dieser Aufruf erfolgt, bevor die Editorinstanz ihre Initialisierung abgeschlossen hat Verwenden Sie daher das Ereignis onInit * der Editorinstanz, um dieses Ereignis abzufangen. * * @param tinymce.Editor ed Die Editorinstanz, in der das Plugin initialisiert wird. * @param string url Absolute URL, an der sich das Plugin befindet. * / init: function (ed, url) , / ** * Erstellt Steuerelementinstanzen basierend auf dem eingegangenen Namen. Diese Methode ist normalerweise * nicht erforderlich, da die addButton-Methode der Klasse tinymce.Editor eine einfachere Methode zum Hinzufügen ist Schaltflächen * Sie müssen jedoch manchmal komplexere Steuerelemente erstellen, wie z. B. Listenfelder, Schaltflächen zum Trennen von Schaltflächen usw. Diese * -Methode kann zum Erstellen dieser Steuerelemente verwendet werden. * * @param String n Name des zu erstellenden Steuerelements. * @param tinymce.ControlManager cm Steuermanager, um das neue Steuerelement zu erstellen. * @return tinymce.ui.Control Neues Steuerelement inst ance oder null, wenn kein Steuerelement erstellt wurde. * / createControl: Funktion (n, cm) return null; , / ** * Gibt Informationen über das Plugin als Name / Wert-Array zurück. * Die aktuellen Schlüssel sind Langname, Autor, Autor, Infourl und Version. * * @return Object Name / Wert-Array mit Informationen zum Plugin. * / getInfo: function () return Langname: 'Wptuts Buttons', Autor: 'Lee', Autorurl: 'http://wp.tutsplus.com/author/leepham', Infourl: 'http: // wiki. moxiecode.com/index.php/TinyMCE:Plugins/example ', Version: "0,1"; ); // Plugin registrieren tinymce.PluginManager.add ('wptuts', tinymce.plugins.Wptuts); ) (); Denken Sie daran, diesen Code in die wptuts-plugin.js Datei. Wir haben die Code-Kommentare für Sie hinterlassen, um leicht zu verstehen, was los ist. Der obige Code führt nur zwei Hauptaufgaben aus:
erstellen Methode. Das Verhalten unseres Plugins wird im definiert drin und createControl Funktionen. Sie können sehen, dass die Informationen des Plugins im angegeben sind Informationen bekommen Funktion auch. Unser Plugin wird den Namen haben Wptuts und die ID wptuts Wie du siehst.In dem drin Funktion, beginnen wir unsere Schaltflächen zu erstellen. Der Code sieht wie folgt aus:
(function () tinymce.create ('tinymce.plugins.Wptuts', init: function (ed, url)) ed.addButton ('dropcap', title: 'dropCap', cmd: 'dropcap', Bild: url + '/dropcap.jpg'); ed.addButton ('showrecent', title: 'Zuletzt hinzugefügte Posts shortcode hinzufügen', cmd: 'showrecent', Bild: url + '/recent.jpg');, //… versteckter Code); // Plugin registrieren tinymce.PluginManager.add ('wptuts', tinymce.plugins.Wptuts);) (); Mit der addButton Methode der ed Objekt sagen wir dem aktuellen Editor, dass wir alle diese Schaltflächen erstellen wollen. Diese Methode akzeptiert zwei Argumente:
cmd Eigenschaft hat den Wert von Showrecent. Das ist die ID des Befehls, die bei jedem Aufruf ausgeführt wird. Wir werden in Kürze ins Detail gehenBildWert.Überprüfen Sie nun den WordPress-Editor und wir werden sehen, wie unsere Schaltflächen angezeigt werden. Im Moment tun sie aber nichts.
Wir haben den Namen der Befehle definiert, die von unseren Schaltflächen ausgeführt werden, aber noch nicht definiert, was sie tatsächlich ausführen sollen. In diesem Schritt werden wir festlegen, was unsere Tasten tun werden. In der drin Funktion, fügen Sie diesen Code wie gezeigt hinzu:
(function () tinymce.create ('tinymce.plugins.Wptuts', init: function (ed, url)) ed.addButton ('dropcap', title: 'dropCap', cmd: 'dropcap', Bild: url + '/dropcap.jpg'); ed.addButton ('showrecent', title: 'Zuletzt hinzugefügte Posts shortcode hinzufügen', cmd: 'showrecent', Bild: url + '/recent.jpg'); addCommand ('dropcap', function () var selected_text = ed.selection.getContent (); var return_text = "; return_text = ''+ selected_text +''; ed.execCommand ('mceInsertContent', 0, Rückgabetext); ); ed.addCommand ('showrecent', function () var number = Eingabeaufforderung ("Wie viele Posts möchten Sie anzeigen?"), shortcode; if (number! == null) number = parseInt (number); if (number > 0 && Nummer <= 20) shortcode = '[recent-post number="' + number + '"/]'; ed.execCommand('mceInsertContent', 0, shortcode); else alert("The number value is invalid. It should be from 0 to 20."); ); , //… Hidden code ); // Register plugin tinymce.PluginManager.add( 'wptuts', tinymce.plugins.Wptuts ); )(); Jetzt die ed.addCommand Diese Methode hilft uns, einen neuen Befehl hinzuzufügen. Sie müssen die Befehls-ID und die Rückruffunktion übergeben, die ausgeführt wird, wenn sie vom aufgerufen wurde ed.execCommand Methode. Beachten Sie, dass ed repräsentiert die tinyMCE.activeEditor Objekt. Schauen wir uns die Callback-Funktionen an:
Dropcap Wenn Sie einen Befehl auswählen, wählen Sie einen Buchstaben aus und klicken auf die DropCap Wenn Sie die Taste drücken, wird der Brief in eine Drop-Cap-Form umgewandelt. Wie bekommen wir diesen Brief? Nun die ed.selection.getContent Methode wird das für uns tun. Sobald wir diesen Brief erhalten haben, wickeln wir ihn einfach in ein Spanne Element. Denken Sie daran, den Klassenwert dieses Elements auf zu setzen Dropcap dass wir vorher definiert haben, richtig? Schließlich haben wir den vollständigen Text, der wieder in den Editor eingefügt werden muss. TinyMCE hat einen Standardbefehl mit dem Namen mceInsertContent Diese Funktion wird zum Einfügen bestimmter Inhalte in den Editor verwendet. Die Verwendung dieser Informationen finden Sie oben. Der Inhalt wird als drittes Argument von übergeben mceInsertContent Methode.Anstatt reinen Text hinzuzufügen, wenn die Schaltflächen Inhalt in den visuellen Editor einfügen, können Sie ihn deutlich visueller gestalten, indem Sie benutzerdefiniertes CSS für unsere Schaltflächen registrieren. Es hängt von der Art der Inhaltsdaten ab, und Sie können einen geeigneten Stil auswählen. Zum Beispiel unser DropcapDer Stil des Styles kann dem des Frontends entsprechen. So können Sie den CSS-Code ganz oben in diesem Beitrag verwenden und ihn dann in den Ordner einfügen editor-style.css Datei (Standardeinstellung siehe add_editor_style für detais).
Für Kurzwahlen haben sie möglicherweise selbst kein HTML-Element. Wie sollen wir sie gestalten? Nun, diese Situation ist viel komplexer, um das Ergebnis zu erreichen, aber es ist nicht unmöglich (einige Standard-WordPress-Schaltflächen wie "Medien hinzufügen" werden angezeigt). Es kann jedoch immer noch schwierig sein, diesen Shortcode in ein HTML-Element einzuhüllen und dann wie oben beschrieben zu gestalten. Es ist ziemlich einfach, aber nicht ganz perfekt. In diesem Beitrag werden wir uns nicht auf diese komplexe Verarbeitung konzentrieren.
Schließlich werden die Ergebnisse, die wir erhalten, folgendermaßen dargestellt:
Dann am Frontend:
Und die Schaltfläche Recent Posts funktioniert auch gut:
Okay, wir haben eine Übung behandelt, die ziemlich einfach und leicht zu folgen ist. Möglicherweise stellen Sie fest, dass Sie mit der Schaltfläche "Letzte Beiträge" eine Einstellung anpassen können (die Anzahl der Beiträge, die angezeigt werden). Sie wissen sicherlich, dass wir das Standard-JavaScript verwendet haben, Prompt, das zu erreichen. Was ist, wenn Sie ein komplexeres Popup wünschen, das viele statt nur eine Einstellung hat? In einem anderen Beitrag werden wir das besprechen und einen anderen Ansatz ausprobieren.
Jedes Feedback zu diesem Beitrag wird geschätzt. Danke fürs Lesen und bis später.
TinyMCE_Custom_Buttons