/ Wordpress / Панель форматирования комментария

Панель форматирования комментария

HIT

20.07.2016

2738

5

Добавляем к форме комментария панель форматирования комментариев (Quicktags) без плагина. Расширяем стандартную форму комментария.

Кнопки добавления тегов (Текст)

Данная техника добавляет панель с кнопками для добавления тегов.

Вставляем код в functions.php

// Панель форматирования в форме комментирования

add_filter( 'comment_form_defaults', 'rich_text_comment_form' );

function rich_text_comment_form( $args ) {
	ob_start();
	wp_editor( '', 'comment', array(
		'media_buttons' => true, // show insert/upload button(s) to users with permission
		'textarea_rows' => '10', // re-size text area
		'dfw' => false, // replace the default full screen with DFW (WordPress 3.4+)
		'tinymce' => array(
        	'theme_advanced_buttons1' => 'bold,italic,underline,strikethrough,bullist,numlist,code,blockquote,link,unlink,outdent,indent,|,undo,redo,fullscreen',
	        'theme_advanced_buttons2' => '', // 2nd row, if needed
        	'theme_advanced_buttons3' => '', // 3rd row, if needed
        	'theme_advanced_buttons4' => '' // 4th row, if needed
  	  	),
		'quicktags' => array(
 	       'buttons' => 'strong,em,link,block,del,ins,img,ul,ol,li,code,close'
	    )
	) );
	$args['comment_field'] = ob_get_clean();
	return $args;
}
Не совсем корректно работает кнопка link: форма добавления ссылки появляется в футере. Решается добавлением стиля с атрибутом position: fixed;

Стили кнопок форматирования

.quicktags-toolbar input {margin-bottom: 5px;}

.quicktags-toolbar input {padding: 4px 8px; margin-right: 5px;}

#wp-link-wrap {
    position: fixed;
    left: 30%;
    top: 15%;
    background-color: whitesmoke;
    padding: 25px 50px;
    border: 2px solid #50aaff;
    z-index: 99;
}
Примеры ниже в комментарии

Форма комментария в виде редактора TinyMCE (Визуально)

Вставляем в functions.php

add_filter( 'comment_form_field_comment', 'comment_editor' );

function comment_editor() {
global $post;

ob_start();

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

$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;
}

// wp_editor doesn't work when clicking reply. Here is the fix.
add_action( 'wp_enqueue_scripts', '__THEME_PREFIX__scripts' );
function __THEME_PREFIX__scripts() {
wp_enqueue_script('jquery');
}
add_filter( 'comment_reply_link', '__THEME_PREFIX__comment_reply_link' );
function __THEME_PREFIX__comment_reply_link($link) {
return str_replace( 'onclick=', 'data-onclick=', $link );
}
add_action( 'wp_head', '__THEME_PREFIX__wp_head' );
function __THEME_PREFIX__wp_head() {
?>
<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('mceRemoveEditor', true, 'comment');
addComment.moveForm.apply( addComment, args );
tinymce.EditorManager.execCommand('mceAddEditor', true, 'comment');
});
});
</script>
<?php }

В данном решении стили не нужны. Недостатком является отсутствие кнопки добавить изображение.

Подумать, как реализовать переключение ввода Визуально/Текст

Промониторил несколько плагинов:
TinyMCE Comment Field — WYSIWYG (1000) — после установки запросил установить еще один плагин — я его сразу удалил. TinyMCE Visual Editor Comment (1000) — при активации, выдал фатальную ошибку и отключился.

Панель комментирования в 2-х режимах

Настроил панель, таким образом чтобы была возможность переключения между визуальным и текстовым режимом

add_filter( 'comment_form_field_comment', 'wpse_64243_comment_editor' );

function wpse_64243_comment_editor( $field ) {

    if (!is_single()) return $field; //only on single post pages.
    global $post;
  
    $mce_buttons = array( 'bold', 'italic', 'underline', 'strikethrough', 'hr', 'bullist', 'numlist', 'underline', 'undo', 'redo', 'fullscreen' );

    ob_start();
	
	wp_editor( '', 'comment', array(
	'wpautop' => 0,  
	'textarea_rows' => 10,
	'teeny' => 1,
	'quicktags' => array(
					'buttons' => 'strong,em,del,img,ul,ol,li,code'
				),
	'media_buttons' => 0,
	'tinymce' => array (
	  				'toolbar1' => implode($mce_buttons, ',')
				)
	) );
  
    $editor = ob_get_contents();

    ob_end_clean();

    //убедитесь, что средства комментариев прикреплены к родительскому сообщению
    $editor = str_replace( 'post_id=0', 'post_id='.get_the_ID(), $editor );

    return $editor;

}

‘buttons’ => ‘strong,em,del,img,ul,ol,li,code’ — этой строкой настраиваем кнопки форматирования html

$mce_buttons = array( ‘bold’, ‘italic’, ‘underline’, ‘strikethrough’, ‘hr’, ‘bullist’, ‘numlist’, ‘underline’, ‘undo’, ‘redo’, ‘fullscreen’ ); — этой переменной настраиваем кнопки форматирования визуального редактора.

[site-socialshare]
  • Комментарии
  • Вложения

Добавить комментарий

5 комментариев

  1. maker1447

    Жирный курсив

    Цитата

    Del ins
    Код
    бассейн

  2. maker1447

    Второй комментарий

  3. maker1447

    Пример в виде редактора TinyMCE

    Текст ссылка кенкнкн

  4. Андрей

    Тестовый код     

Панель форматирования комментария
Автоматическое меню, оглавление, измененное состояние меню
Рекомендации для васАвтоматическое меню, оглавление, измененное состояние менюOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.