Add TinyMCE Rich Text Editor to WordPress Comments without Plugin

Default WordPress comment form is pretty basic. So, if a visitor on your site wanted some formatting on their comment they will have to use HTML tags. Writing markup is not easy for everyone. To make make things easier for people commenting, you can add a rich text editor to the comment form. And to do add it, we can use the wp_editor() function introduced in WordPress 3.3, no need of an additional plugin.

To enable this functionality on your site just drop the following code in your active theme’s function.php file. Once you add it, you should be able to see something like in the image.

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

I’ve commented most parts of the code that you can customize. Rest needs to be as it is.

You can customize the TinyMCE text editor. For instance, if you don’t want any button, simply remove it from the code. Or, if you’d like to add more buttons like the ones that allow selection of font size, text color, and more, you just have to include it in theme_advanced_buttons1. Check out this page for the list of supported buttons.

If you want to add many buttons and your comment form isn’t wide enough, those buttons can be moved to another row. A total of four rows are possible. You can remove these lines from the code if you are not going to use them:

theme_advanced_buttons2: '',
theme_advanced_buttons3: '',
theme_advanced_buttons4: '',

Similarly to the visual editor you can also customize quicktags buttons in the HTML editor by adding and removing them. Or, if you don’t want the plain editor, replace quicktag line with:

'quicktags' => false

The visual editor comment form works almost fine with the code we have placed so far, however, you’ll find that there’s a little issue when replying to an existing comment. When replying, the comment form will not move, that means it just stays where it is at the bottom of the page. To fix this issue, add this code (via Revood.com) below the one you placed earlier:

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('mceRemoveControl', true, 'comment');
			addComment.moveForm.apply( addComment, args );
			tinymce.EditorManager.execCommand('mceAddControl', true, 'comment');
		});
	});
</script>
<?php
}
?>

With this in place, everything should work fine now.