Kako aktivirati TinyMCE 4 editor u sekciji komentara

U prethodnom članku pod nazivom “WordPress 3.9+ – dodavanje funkcionalnosti u TinyMCE 4 editor” opisao sam kako dodati izbor custom obitelji i veličine fontova. U današnjem članku ću pisati kako omogućiti korištenje text editora u sekciji komentara vaše teme.

Ovako izgleda sekcija komentara u jednoj od defaultnih WordPress tema, Twenty Thirteen:

Twenty Thirteen – sekcija komentara

Nakon što pročitate ovaj članak (i izvršite izmjene koda), sekcija komentara će izgledati ovako:

Twenty Thirteen – sekcija komentara s TinyMCE editorom

Dodavanje koda za prikaz tekst editora u komentarima

Dodavanjem niže navedenog koda u functions.php datoteku vaše child teme ili u Site specific plugin, aktivirati ćete TinyMCE editor u sekciji komentara.

function mx_comment_form( $fields ) {
    ob_start();
    wp_editor( '', 'comment', array( 'teeny' => true ));
    $fields['comment_field'] = ob_get_clean();
    return $fields;
}
add_filter( 'comment_form_defaults', 'mx_comment_form' );

Ovim kodom smo se “zakačili” na defaultni WordPress filter za komentare i zamjenili smo standardno polje (comment_field) sa sadržajem TinyMCE editora. Također, u ovom slučaju koristimo tzv. teeny mode, koji je pojednostavljena verzija TinyMCE editora. Kasnije u članku ćemo dodatno izbaciti nekoliko gumba kako bi tekst editor bio još jednostavniji.

Nakon što smo u functions.php dodali gore navedeni kod, u sekciji komentara ćete vidjeti editor koji izgleda ovako:

Twenty Thirteen – aktiviran teeny mode

Slijedeći koraci se odnose na fino podešavanje tekst editora. Tako ćemo smanjiti broje redova (visinu) sa defaultnih 10 na 5 redova:

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

Ukloniti ćemo i gumb za dodavanje medijskih datoteka:

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

Ukloniti ćemo i mogućnost odabira Vizualne i Tekst kartice i to korištenjem opcije quicktags:

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

Malo ćemo poboljšati izgled prikaza “Punog zaslona” i to tako što ćemo koristiti tzv. način Pisanje bez ometanja (Distraction Free Writing mode) aktivirajući opciju dfw

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

I za kraj, ukloniti ću dva, meni osobno, bezvezna gumba a to su Undo/Redo. Jedan je razlog što ćemo dodatno pojednostaviti izgleda tekst editora, a drugi je taj što (nadam se) svi znaju barem neke osnovne kratice na tipkovnici, pa tako i Undo/Redo. Ako ih ipak ne znate, ekvivalent su kratice Ctrl+z i Ctrl+y na Windowsima, a na Macu Command-Z i Command-Shift-Z.

Za uklanjanje spomenutih gumba, koristiti ću teeny_mce_buttons filter te tako ukloniti deseti i jedanaesti gumb.

add_filter( 'teeny_mce_buttons', 'mx_comment_form_no_undoredo');

function mx_comment_form_no_undoredo($buttons) {
	unset($buttons[10]);
	unset($buttons[11]);
	return $buttons;
}

Kompletni kod i/ili plugin

Kompletirali smo kod potreban za korištenje text editora u sekciji komentara. Cjelokupni kod koji dodajete u functions.php datoteku vaše teme (po mogućnosti child teme), izgleda ovako:

function mx_comment_form( $fields ) {
    ob_start();
    wp_editor( '', 'comment', array(
   'teeny' => true,
   'textarea_rows' => 5,
   'media_buttons' => false,
   'dfw' => true,
   'quicktags' => false ));
    $fields['comment_field'] = ob_get_clean();
    return $fields;
}
add_filter( 'comment_form_defaults', 'mx_comment_form' );

// Ukloni undo/redo gumbe
add_filter( 'teeny_mce_buttons', 'mx_comment_form_no_undoredo');

function mx_comment_form_no_undoredo($buttons) {
	unset($buttons[10]);
	unset($buttons[11]);
	return $buttons;
}

Alternativno, možete skinuti jednostavan plugin koji sam kreirao za ovaj članak a omogućuje vam gore navedene funkcionalnosti. Downloadajte ga, instalirajte ga kao svaki drugi plugin (upload zip datoteke) , aktivirajte i uživajte u integriranom TinyMCE editoru i komentarima.