Visueller Editor für Kommentare

Standard WordPress Editor TinyMCE für Kommentare nutzen

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.


Anzeige

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


Anzeige

/*-----------------------------------------------------------------------------*/
/*  Standard WordPress Editor TinyMCE für Kommentare nutzen  */
/*  http://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:

Visual Editor TinyMCE für WordPress-Kommentare nutzen

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


Anzeige

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

HTML-Editor: Quicktag-Schaltflächen

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)

War dieser Artikel hilfreich? Ja Nein
Jonathan

Hi, ich bin Jonathan Torke, WordPress-Programmierer. Auf pixeltuner.de blogge ich über Webdesign und Social Media. Außerdem teile ich über Twitter täglich frische Ressourcen für Webdesigner und -Entwickler. Du findest mich auch bei Google+, Facebook und deviantART.

12 Antworten auf "Standard WordPress Editor TinyMCE für Kommentare nutzen"
  • 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

    • Jonathan

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

    • Jonathan

      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

  • Axel Schmidt:

    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:

    1. Bei mir stehen die Schaltflächen untereinander, nicht nebeneinander wie zB hier bei dir im Kommentarfeld.
    2. Wie bekomme ich diesen Spruch:
      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> 

      weg bzw wo finde ich den?

    Danke für deine Hilfe

    Axel

    • Jonathan

      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)

      #respond p {
          display: block;
          margin-top: -20px;
      }
      
      

      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

      • Axel Schmidt:

        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

  • Peter Thimm:

    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.

    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.

    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

    • Jonathan

      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ß

      • Peter Thimm:

        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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Jetzt das eigene Projekt starten mit den webgo Webhosting Paketen
Anzeige