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

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

HIT

20.07.2016

2659

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. Андрей

    Тестовый код     

Панель форматирования комментария
Тема StoreFront
Рекомендации для васТема StoreFrontOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.