Adding Visual editor to WordPress comments box (part 2)

There were few issues with implementation of Visual editor to WordPress comments box with the method explained in part 1. Some of the issues are:

1. Difficulty in including tinyMCE language files
2. The Visual editor does not work after clicking on 'reply'.

To overcome the above issues, we can implement Visual editor to comments box by utilizing the new WordPress editor API (available with WordPress 3.3).

In your Theme’s functions.php file, add the following snippet:

add_filter( 'comment_form_defaults', 'custom_comment_form_defaults' );
function custom_comment_form_defaults( $args ) {
	if ( is_user_logged_in() ) {
		$mce_plugins = 'inlinepopups, fullscreen, wordpress, wplink, wpdialogs';
	} else {
		$mce_plugins = 'fullscreen, wordpress';
	}

	ob_start();
	wp_editor( '', 'comment', array(
		'media_buttons' => true,
		'teeny' => true,
		'textarea_rows' => '7',
		'tinymce' => array( 'plugins' => $mce_plugins )
	) );
	$args['comment_field'] = ob_get_clean();

	return $args;
}

Update:

Add the following lines to your functions.php file to work correctly in reply section.

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(/\&quot;|\s+/g, '');
			args = args.split(',');
			tinymce.EditorManager.execCommand('mceRemoveControl', true, 'comment');
			addComment.moveForm.apply( addComment, args );
			tinymce.EditorManager.execCommand('mceAddControl', true, 'comment');
		});
	});
</script>
}