Edytor TinyMCE w sekcji komentarzy

Często pojawia się potrzeba wyświetlenia edytora WYSIWYG zamiast standardowego edytora komentarzy. Na szczęście jest to bardzo łatwe do osiągnięcia – wystarczy drobna modyfikacja pliku functions.php naszego motywu.

Musimy po prostu dodać w nim następujący fragment kodu:

 function dziudek_comment_form( $fields ) {
    ob_start();
    wp_editor( '', 'comment', array( 'teeny' => true ));
    $fields['comment_field'] = ob_get_clean();

    return $fields;
}

add_filter( 'comment_form_defaults', 'dziudek_comment_form' );

Jak widać korzystamy z filtra comment_form_defaults oraz możliwości buforowania wyjścia w PHP. Dzięki temu jesteśmy w stanie zastąpić standardowe pole na treść komentarza edytorem TinyMCE.

Kolejna ważna rzecz to wykorzystanie w TinyMCE trybu teeny. Tryb ten umożliwia wyświetlenie uproszczonej wersji edytora.

Oczywiście zaprezentowany kod powyżej zawiera bardzo podstawową konfigurację, która spowoduje wyświetlenie mniej więcej takiego edytora jak widoczny poniżej:

tinymce_comments

Jak widać będziemy potrzebowali kilku poprawek aby edytor wyglądał tak jak byśmy tego chcieli. Zacznijmy od rozmiaru edytora – domyślnie wyświetla on obszar edycji tekstu na 10 linijek, jak widać na powyższym screenshocie jest to zdecydowanie za dużo. Na szczęście wystarczy zmienić wywołanie funkcji wp_editor na następujące:

 

wp_editor( '', 'comment', array(
'teeny' => true,
'textarea_rows' => 5
));

Aby ograniczyć ilość linii tekstu do 5 – dzięki opcji textarea_rows. Dzięki tym zmianom edytor wygląda lepiej:

tinymce_comments_2

Kolejna kwestia to możliwość wstawiania obrazków – najczęściej nie chcemy aby użytkownicy zajmowali nam miejsce na serwerze dodatkowymi zasobami, zatem warto wyłączyć przycisk dodający media – w tym celu korzystamy z opcji media_buttons:

wp_editor( '', 'comment', array(
'teeny' => true,
'textarea_rows' => 5,
'media_buttons' => false
));

Nasz edytor wygląda już całkiem zgrabnie pozbawiony tego elementu:

tinymce_comments_3

Pozostaje jeszcze mała niedoróbka – przy widocznej szerokości obszaru na komentarze, niestety jedna z ikon się nie mieści – zatem trzeba jakiś mało potrzebny przycisk wyrzucić – osobiście postawiłbym na przycisk dodający przekreślenie do tekstu – w tym celu wykorzystamy filter mce_teeny_buttons i usuniemy 5 przycisk z listy:

add_filter( 'teeny_mce_buttons', 'dziudek_comment_form_no_strikethrough');

function dziudek_comment_form_no_strikethrough($buttons) {
	unset($buttons[4]);
	return $buttons;
}

Dzięki powyższemu zabiegowi nasz edytor prezentuje się już bardzo zgrabnie i zajmuje minimalną ilość miejsca:

tinymce_comments_4

Pozostaje jeszcze jeden dodatek – tryb fullscreen, który domyślnie prezentuje się jak poniżej:

tinymce_comments_5

Możemy też skorzystać z trybu Distraction Free Writing po dodaniu kolejnej opcji – dfw:

wp_editor( '', 'comment', array(
'teeny' => true,
'textarea_rows' => 5,
'media_buttons' => false,
'dfw' => true
));

Dzięki któremu tryb pełnoekranowy jest moim zdaniem trochę lepszy z wyglądu:

tinymce_comments_6

Przede wszystkim posiada on widoczny przycisk powrotu do normalnego trybu edycji – w przeciwieństwie do standardowego trybu pełnoekranowego.

Na koniec gdybyśmy chcieli jeszcze zmniejszyć rozmiar edytora, możemy usunąć zakładki od wyboru pomiędzy trybem WYSIWYG i tekstowym – służy do tego opcja quicktags:

wp_editor( '', 'comment', array(
'teeny' => true,
'textarea_rows' => 5,
'media_buttons' => false,
'dfw' => true,
'quicktags' => false
));

Dzięki temu otrzymujemy najbardziej okrojoną wersję edytora WYSIWYG w komentarzach:

tinymce_comments_7

  • Fajne, dzięki temu mogłem się pozbyć starego pluginu Comment Form Quicktags

  • Natrafiłem na pewien problem. Przy czym winię, twój kod bo jak go wyłączę to wszystko poprawnie działa. A dokładniej, chodzi o fakt iż jak chce odpowiedzieć na komentarz (komentarz 2 poziomu), to nie mam aktywnego pola do wpisywania komentarzy.

    • Jedyne co przychodzi mi do głowy to to, że edytor jest klonowany i przez to nie ma podpiętych eventów co powoduje, że edytor nie działa bo to de facto tylko kopia HTML i CSS. I niestety obawiam się, że rozwiązanie tego problemu nie będzie trywialne.

      • Pytanie, czy to wina mojego szablonu (noteskine), czy też rozwiązania wielopoziomowego komentowania w WP?

        • Raczej obstawiam rozwiązanie wielopoziomowego komentowania w WP, ale dla pewności można to sprawdzić na jakimś standardowym szablonie.