WordPress hat den JavaScript-basierten WYSIWYG-Editor TinyMCE für den Adminbereich im Einsatz. Wir verwenden ihn, um z.B. Artikel zu verfassen, womit sich spielerisch Texte unterstreichen, Bilder und andere Medieninhalte einbinden oder komplexe Tabellen erstellen lassen.
Dagegen ist die Standard-Kommentarfunktion bei WordPress ziemlich schlicht gehalten. Wenn Besucher auf Deiner Webseite ihren Kommentar formatieren möchten, müssen sie HTML-Tags verwenden. Unterhalb der meisten Kommentarformulare wirst Du einen kryptischen Hinweis, wie diesen finden:
Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Mal ernsthaft, wie viele Blogbesucher werden wohl diese mysteriösen HTML-Codes verstehen, mit denen sie ihre Kommentare auf Deinem Blog bearbeiten können? Wäre es nicht großartig, Deinen Besuchern den bereits im Backend vorhandenen Editor TinyMCE als Werkzeug in die Hand zu legen, womit sie ihre Kommentare – wie aus gängigen Textverarbeitungsprogrammen gewohnt – intuitiv formatieren können?
In diesem Artikel möchte ich Dir mit Hilfe weniger Zeilen PHP-Code erklären, wie Du den Standard WordPress Editor TinyMCE für Kommentare auf Deinem Blog nutzen kannst.
Editor TinyMCE für das Frontend
Mit WordPress 3.3 wurde die Funktion wp_editor() eingeführt, wodurch das Hinzufügen des visuellen Editors im Frontend für Entwickler problemlos ermöglicht und somit das Formatieren von Inhalten für Anwender sehr vereinfacht wird.
Damit Du den Visual Editor TinyMCE für Kommentare nutzen kannst, kopiere folgenden Code und füge ihn in die functions.php
-Datei Deines verwendeten Themes.
Pfad: dein-wordpress/wp-content/themes/dein-theme/functions.php
/*-----------------------------------------------------------------------------*/ /* Standard WordPress Editor TinyMCE für Kommentare nutzen */ /* https://pixeltuner.de//wordpress-editor-tinymce-fuer-kommentare/ */ /*-----------------------------------------------------------------------------*/ // Editor TinyMCE laden function comment_editor() { global $post; ob_start(); wp_editor( '', 'comment', array( 'textarea_rows' => 15, // Zeilenanzahl für das Textfeld 'teeny' => true // Ausgabe der Minimaleditor Konfiguration )); $editor = ob_get_contents(); ob_end_clean(); //make sure comment media is attached to parent post $editor = str_replace( 'post_id=0', 'post_id='.get_the_ID(), $editor ); return $editor; } add_filter( 'comment_form_field_comment', 'comment_editor' ); // Filterelemente des visuellen Editors für nicht Admin-Benutzer ausschließen function wp_editor_allowed_tags() { global $allowedtags; $allowedtags['ul'] = array(); $allowedtags['ol'] = array(); $allowedtags['li'] = array(); $allowedtags['strong'] = array(); $allowedtags['ins'] = array( 'datetime' => true ); $allowedtags['del'] = array( 'datetime' => true ); $allowedtags['pre'] = array( 'lang' => true, 'line' => true ); $allowedtags['span'] = array( 'style' => true ); $allowedtags['img'] = array( 'width' => true, 'height' => true, 'src' => true, 'alt' => true ); $allowedtags['a'] = array( 'target' => true, 'href' => true, 'title' => true, ); } add_action('init', 'wp_editor_allowed_tags'); // wp_editor funktioniert nicht beim Antworten auf Kommentare. Hier ist die Lösung. function wp_editor_fix_scripts() { wp_enqueue_script('jquery'); } add_action( 'wp_enqueue_scripts', 'wp_editor_fix_scripts' ); function wp_editor_reply_link($link) { return str_replace( 'onclick=', 'data-onclick=', $link ); } add_filter( 'comment_reply_link', 'wp_editor_reply_link' ); function wp_editor_script() { ?> <style> .form-allowed-tags {display: none!important;} </style> <script type="text/javascript"> jQuery(function($){ $('.comment-reply-link').click(function(e){ e.preventDefault(); var args = $(this).data('onclick'); args = args.replace(/.*\(|\)/gi, '').replace(/\"|\s+/g, ''); args = args.split(','); tinymce.EditorManager.execCommand('mceRemoveControl', true, 'comment'); addComment.moveForm.apply( addComment, args ); tinymce.EditorManager.execCommand('mceAddControl', true, 'comment'); }); }); </script> <?php } add_action( 'wp_head', 'wp_editor_script' );
Abspeichern, fertig.
Ergebnis
Sobald Du nun den vorigen Code korrekt in die functions.php-Datei gespeichert hast, wird das Standardkommentarformular durch den Visual Editor TinyMCE von WordPress ersetzt, wie der folgende Screenshot zeigt:
Erklärungen zum Code
Falls Du den obigen PHP-Code auch verstehen lernen möchtest, anstatt ihn einfach nur durch Kopieren & Einfügen der functions.php-Datei zu übermitteln, möchte ich folglich die einzelnen Funktionen des Codes erklären.
Visueller Editor TinyMCE anpassen
Du kannst den Editor anpassen. Wenn Du also einige Buttons für das Formatieren nicht benötigen solltest, kannst Du diese aus der Toolbar des visuellen Tabs entfernen. Oder falls Du weitere Buttons zum Formatieren in den Editor einbinden möchtest, wie z.B. für die Auswahl der Schriftfarbe, Schriftgröße und für vieles mehr, dann kannst Du die TinyMCE-Einstellungen für Deine Belange selbst erweitern oder reduzieren.
Werfen wir dazu nochmal einen Blick nach oben auf den PHP-Code zur Funktion wp_editor() in Zeile 10:
// Editor TinyMCE laden wp_editor( '', 'comment', array( 'textarea_rows' => 15, // Zeilenanzahl für das Textfeld 'teeny' => true // Ausgabe der Minimalversion des visuellen Editors ));
Dort haben wir zunächst zwei Einstellungen definiert:
- Die Zeilenanzahl für das Textfeld (Zeile 11)
- Die Ausgabe der Minimalversion des visuellen Editors (Zeile 12)
Da die wp_editor()-Standardeinstellung für den TinyMCE bereits auf true gesetzt ist, benötigen wir diese Einstellungszuweisung in dieser Funktion nicht mehr. Der visuelle Editor wird also standardmäßig geladen. Daher sollten Funktionszuweisungen nur vorgenommen werden, wenn diese nicht den Standardeinstellungen entsprechen, wie folgendes Beispiel zeigt.
Um die TinyMCE-Einstellungen nun individuell anpassen zu können, gliedern wir alle gewünschten Formatier-Funktionen als Standard-Schaltflächen in die erste Editorzeile (theme_advanced_buttons1) innerhalb der Toolbar ein.
Hier kannst Du einen Blick auf alle TinyMCE Standard-Schaltflächen werfen.
Die Option theme_advanced_buttons_1_n findet Verwendung bei TinyMCE 3.x. Ab WordPress 3.9 wird WordPress den TinyMCE 4 in den Core einbinden.
Lass uns jetzt ein paar Schaltflächen integrieren (Zeile 14):
// Editor TinyMCE laden wp_editor( '', 'comment', array( 'textarea_rows' => 15, // Zeilenanzahl für das Textfeld 'teeny' => true, // Ausgabe der Minimalversion des visuellen Editors 'tinymce' => array( 'theme_advanced_buttons1' => 'bold,italic,underline,strikethrough,bullist,numlist,code,blockquote,link,unlink,outdent,indent,|,undo,redo,fullscreen', // Schaltflächen für Formatierungen 'theme_advanced_buttons2' => '', // 2. Editorzeile, falls nötig 'theme_advanced_buttons3' => '', // 3. Editorzeile, falls nötig 'theme_advanced_buttons4' => '' // 4. Editorzeile, falls nötig ). ));
Falls Du weitere Schaltflächen hinzufügen möchtest und die Schaltflächen-Zeile in der Toolbar jedoch nicht genug Platz für die Buttons bereitstellt, kannst Du weitere Schaltflächen in eine weitere Reihe unterbringen. Insgesamt sind vier Reihen in der Toolbar für diesen Zweck vorgesehen.
Du kannst diese Zeilen (Zeile 14-16) jedoch aus dem Code entfernen, wenn Du nicht vorhast, sie zu nutzen:
'tinymce' => array( 'theme_advanced_buttons1' => 'bold,italic,underline,strikethrough,bullist,numlist,code,blockquote,link,unlink,outdent,indent,|,undo,redo,fullscreen', // Schaltflächen für Formatierungen 'theme_advanced_buttons2' => '', // 2. Editorzeile, falls nötig 'theme_advanced_buttons3' => '', // 3. Editorzeile, falls nötig 'theme_advanced_buttons4' => '' // 4. Editorzeile, falls nötig )
Text/HTML Editor anpassen
Ähnlich wie beim visuellen Editor kannst Du durch das Hinzufügen oder Entfernen von Quicktag-Schaltflächen den HTML-Editor in seinem Funktionsumfang beeinflussen.
Falls Du auf den HTML-Editor sogar komplett verzichten möchtest, brauchst Du lediglich die Zuweisung für quicktags auf false stellen (Zeile 16):
// Editor TinyMCE laden wp_editor( '', 'comment', array( 'textarea_rows' => 15, // Zeilenanzahl für das Textfeld 'teeny' => true, // Ausgabe der Minimalversion des visuellen Editors 'tinymce' => array( 'theme_advanced_buttons1' => 'bold,italic,underline,strikethrough,bullist,numlist,code,blockquote,link,unlink,outdent,indent,|,undo,redo,fullscreen', // Schaltflächen für Formatierungen ), 'quicktags' => false ));
Andernfalls kannst Du Quicktag-Schaltflächen hinzufügen (Zeile 16-18):
// Editor TinyMCE laden wp_editor( '', 'comment', array( 'textarea_rows' => 15, // Zeilenanzahl für das Textfeld 'teeny' => true, // Ausgabe der Minimalversion des visuellen Editors 'tinymce' => array( 'theme_advanced_buttons1' => 'bold,italic,underline,strikethrough,bullist,numlist,code,blockquote,link,unlink,outdent,indent,|,undo,redo,fullscreen', // Schaltflächen für Formatierungen ), 'quicktags' => array( 'buttons' => 'strong,em,del,block,ul,ol,li,link,close' ) ));
Der folgende Screenshot veranschaulicht die Umsetzung der HTML-Quicktag-Zuweisungen:
Ausschließen von Filterelementen des visuellen Editors für nicht Admin-Benutzer
WordPress filtert den kommentierten Text für nicht Admin-Benutzer. So sind z.B. Listen, Bilder oder Links für ausgeloggte Besucher von der Formatierung ausgeschlossen. Deshalb verweigern wir nun die von WordPress definierten Filterelemente des visuellen Editors für ausgeloggte Benutzer durch folgende Funktion:
// Filterelemente des visuellen Editors für nicht Admin-Benutzer ausschließen function wp_editor_allowed_tags() { global $allowedtags; $allowedtags['ul'] = array(); $allowedtags['ol'] = array(); $allowedtags['li'] = array(); $allowedtags['strong'] = array(); $allowedtags['ins'] = array( 'datetime' => true ); $allowedtags['del'] = array( 'datetime' => true ); $allowedtags['pre'] = array( 'lang' => true, 'line' => true ); $allowedtags['span'] = array( 'style' => true ); $allowedtags['img'] = array( 'width' => true, 'height' => true, 'src' => true, 'alt' => true ); $allowedtags['a'] = array( 'target' => true, 'href' => true, 'title' => true, ); } add_action('init', 'wp_editor_allowed_tags');
Nun ist es auch für normale Besucher möglich, ihre Kommentare durch das Formatierungsspektrum des visuellen Editors angemessen zu gestalten.
Auf bestehende Kommentare antworten
Der Editor für Kommentare funktioniert soweit ganz gut. Doch leider wirst Du feststellen, dass es ein kleines Problem beim Antworten auf vorhandene Kommentare gibt: sobald Du auf einen Kommentar antworten möchtest, wird der Editor zwar angezeigt, jedoch lässt er sich nicht benutzen. Der Editor macht den Anschein, eingefroren zu sein.
Mit folgenden abschließenden Codezeilen wird der visuelle Editor für Kommentare auf Deinem WordPress-Blog nun reibungslos funktionieren:
// wp_editor funktioniert nicht beim Antworten auf Kommentare. Hier ist die Lösung. function wp_editor_fix_scripts() { wp_enqueue_script('jquery'); } add_action( 'wp_enqueue_scripts', 'wp_editor_fix_scripts' ); function wp_editor_reply_link($link) { return str_replace( 'onclick=', 'data-onclick=', $link ); } add_filter( 'comment_reply_link', 'wp_editor_reply_link' ); function wp_editor_script() { ?> <style> .form-allowed-tags {display: none!important;} </style> <script type="text/javascript"> jQuery(function($){ $('.comment-reply-link').click(function(e){ e.preventDefault(); var args = $(this).data('onclick'); args = args.replace(/.*\(|\)/gi, '').replace(/\"|\s+/g, ''); args = args.split(','); tinymce.EditorManager.execCommand('mceRemoveControl', true, 'comment'); addComment.moveForm.apply( addComment, args ); tinymce.EditorManager.execCommand('mceAddControl', true, 'comment'); }); }); </script> <?php } add_action( 'wp_head', 'wp_editor_script' );
Schluss
Mit diesen überschaubaren PHP-Code ist es möglich, den Standard-Editor TinyMCE von WordPress für Deine Kommentare zu nutzen. Endlich schluss mit missverstänlichen HTML-Hinweisen für Deine Blogbesucher. Ich hoffe, Du kannst mit diesem Code arbeiten!
Falls Du ungeklärte Fragen hierzu hast, kannst Du gerne Deinen Kommentar hinterlassen.
(Artikelbild von opensourceway, cc)
Ich habe meine Seite mit ultimatum theme gebaut.
Leider darf aber im ultimatum theme die functions.php nicht verändern.
Ich versuchs nun mal über ein child theme zu realisieren.
oder gibts noch einen eleganteren Weg für mich?
Danke, Rene
Hi Rene,
warum darfst Du die functions.php nicht verändern?
Alternativ – soweit Dein Theme es zulässt – sollte der Visual Editor für Deine Kommentare durch das Erstellen eines Child Themes möglich sein.
Falls es Dich interessiert: ich baue derzeit fleißig mein Framework aus. Meine WordPress Themes werden den visuellen Editor für Kommentare optional mit an Bord haben, wie folgender Screenshot zeigt:
Framework-Option: Visuellen Editor für Kommentare aktivieren
Wenn Du möchtest, kannst Du Dich informieren lassen, sobald der Launch erfolgt.
Beste Grüße
Hallo Jonathan,
ultimatum theme sagt mir in der functions.php:
/* WARNING: This file is part of the core Ultimatum framework. DO NOT edit this file under any circumstances. */
Wenn ich`s dann trotzdem ändern will, krieg ich nur noch eine weisse Seite, WordPress ist dann gar nicht mehr erreichbar. Wie gesagt versuch ich es jetzt mal mittels Child-Theme.
Und besten Dank für Deinen Tipp zu Deinem Framework, ich hab mich natürlich sofort in die Newsletter Liste eintragen lassen. Da werde ich bestimmt ganz gerne Kunde von Dir.
Grüsse, Rene
Hallo Jonathan,
wie immer ein super Beitrag, danke dafür! Habe das gerade mal ausprobiert und so ein paar Probleme mit dem Editor an sich.
Es geht um folgende Punkte: Die meisten Themes (außer vielleicht deine zukünftigen) unterstützen das Ganze „optisch“ nicht so ganz + das Textfeld ist leider nicht so ganz responsive. Wenn ich mit dem guten Nokia E72 kommentieren möchte, sieht das ziemlich unschön.
Vielleicht kannst du das ja für deine Themes berücksichtigen :)
Ansonsten aber super!!!
LG Kevin
Hi Kevin,
ich bin sehr bemüht, alle Funktionen responsive zu gestalten! Daher danke vielmals für Deinen Hinweis, ich schau da nochmal genauer hin!
Beste Grüße,
Jonathan
Hallo Jonathan,
vielen Dank für deinen Beitrag und dem Tipp. Habe deinen Tipp auch gleich mal umzusetzen versucht (bin noch WP-Laie).
Zwei kleine Problemchen hätte ich da noch:
weg bzw wo finde ich den?
Danke für deine Hilfe
Axel
Hi Axel,
zu Deinem ersten Problem kann ich Dir keinen verlässlichen Rat geben. Dazu benötige ich einen Blick auf die Problematik bzw. den betroffenen Code. Auf Deinem Blog scheinen die Schaltflächen jedoch korrekt angezeigt zu werden.
Zum zweiten Problem: dank Deines Hinweises habe ich nun im obigen Code dieses Artikels in Zeile 72
.form-allowed-tags {display: none;}
durch.form-allowed-tags {display: none!important;}
ersetzt. Wenn Du diese Anpassung ebenso übernimmst, solltest Du feststellen, dass der Info-Text für das HTML-Formatieren nicht weiter angezeigt wird.In Deinem Fall – vorausgesetzt, es handelt sich um gesums.de – rutscht dadurch leider der Button für „Kommentar Abschicken“ etwas hinter das Kommentarfeld. Das liegt daran, weil in der style.css-Datei Deines Themes folgendes zugewiesen wurde:
Pfad: dein-wordpress/wp-content/themes/dein-theme/style.css (Zeile 1037)
Der Wert bei margin-top ist mit -20px zugewiesen. Versuche stattdessen den Wert auf 10px zu korrigieren.
Wenn Du magst, kannst Du mich informieren, ob es Dir geholfen hat.
Besten Gruß,
Jonathan
Hallo Jonathan,
wow, das ging ja schnell – DANKE. Hoffe es hat sich da jetzt nichts überschnitten, da ich zwischenzeitlich noch andere Themes ausprobiert hatte…
zum Prob 1: das Problem zeigt sich, wenn der Editor auf Text steht, bei Visuell passt es. Vlt hilft die das ja. Oder welchen Blick genau bräuchtest du denn?
zum Prob 2: ja, handelt es sich. Und es hat geholfen (wobei ich den Wert auf +10 gesetzt habe, damit zeigt sich Button mit Abstand zum Kommentarfeld.) Meisten komme ich ja durch tial and error ganz gut zurecht (zumindest bei den anderen CMSs, die ich so ausprobiert habe ;) ) – aber die Zeile 1037 hätte ich nie im Leben gefunden ;D. Kann es sein, dass die Themes bei WP etwas komplizierter aufgebaut sind? ;)
Noch mal danke für deine Hilfe
Axel
Lieber Jonathan,
vielen Dank für Deine Mühe, den WP-Editor auch für die Kommentare nutzbar zu machen.
Nun habe ich ein Problem:
Habe den (vollständigen) Code inkl. der Zeilen 58-89 in meine functions.php kopiert, kann allerdings dann nicht auf Kommentare antworten.
Das Problem, das Du oben beschrieben hast, tritt auf trotz Deiner Erweiterung. Ansonsten funktioniert der Editor.
Ich benutze WordPress in der Version 3.9.2 mit einem Child Theme zu TwentyTwelve.
Hast Du vielleicht eine Erklärung oder – noch besser – eine Lösung?
Vielen Dank im Voraus und liebe Grüße
Peter
Hi Peter,
ich habe mir das gerade mal angeschaut. Es scheint den visuellen Editor zu betreffen; der HTML-Bereich scheint dagegen zu funktionieren. Am Wochenende setze ich mich damit genauer auseinander und werde Dich hierrüber auf dem Laufenden halten.
Danke für den Fehlerhinweis!
Besten Gruß
Hallo Jonathan,
weiß auch nicht, wieso, aber jetzt funktioniert’s plötzlich auf Deinem Blog.
Liebe Grüße
Peter
Hallo Jonathan,
herzlichen Dank für die ausführliche Anleitung.
Leider funktioniert sie bei mir nur partiell:
Unter WP 4.3.1 reagiert die Iconleiste im visuellen Modus überhaupt NICHT auf meine Einstellungen. Im Textmodus funktionieren die quicktags!?
Was mir aber noch viel mehr unter den Nägeln brennt, sind die Links. Wenn ich den User die Links mit dem bestehenden TinyMCE-Plugin einfügen lasse, kann er auch interne Links einfügen. Ich hab daher schon das Link-Plugin von TinyMCE runtergeladen und in \wp-includes\js\tinymce\plugins reinkopiert. Allerdings bekomm ich es nicht aktivert und vor allem muss das bestehende Icon durch das neue ersetzt werden – natürlich der Aufruf des „richtigen“ Plugins.
Vielleicht könntest Du zu dem Thema noch was ergänzen.
Herzlichen Dank und liebe Grüße
Oliver
ich würde gerne nur den Visual Editor anbieten und die Link Option entfernen.
Obwohl ich in den theme_advanced_buttons1 „link“ und „undolink“ entferne, bleibt das Symbol und die Funktion erhalten. ?
ja und das mit dem Antworten geht auch leider nicht – schade