Adding visual editor to WordPress comments box

Read part 2 for adding visual editor to WordPress comments box using new editor API available in version  3.3

Writing HTML tags in comments is not easy for everyone. You can add visual editor/TinyMCE in comments box so that your site visitors can easily format text in bold, italic, etc.

You can add visual editor to comments form without a plugin. In your Theme’s functions.php file, add the following snippet:

add_action( 'comment_form_after', 'tinyMCE_comment_form' );
function tinyMCE_comment_form() {
?>
	<script type="text/javascript" src="<?php echo includes_url( 'js/tinymce/tiny_mce.js' ); ?>"></script>;
	<script type="text/javascript">
		tinyMCE.init({
			theme : "advanced",
			mode: "specific_textareas",
			language: "",
			skin: "default",
			theme_advanced_buttons1: 'bold, italic, underline, blockquote, strikethrough, bullist, numlist, undo, redo, link, unlink',
			theme_advanced_buttons2: '',
			theme_advanced_buttons3: '',
			theme_advanced_buttons4: '',
			elements: 'comment',
			theme_advanced_toolbar_location : "top",
		});
	</script>
<?php
}

If you wish to disable link buttons then replace this code

theme_advanced_buttons1: 'bold, italic, underline, blockquote, strikethrough, bullist, numlist, undo, redo, link, unlink',

with

theme_advanced_buttons1: 'bold, italic, underline, blockquote, strikethrough, bullist, numlist, undo, redo',

Note: If you are using this snippet in default WordPress Theme then you will see that the TinyMCE buttons are distorted. You can fix the issue by adding the below CSS code in style.css file.

#respond table {
	margin: 0;
	padding: 0;
}

#respond table td {
	padding: 0;
	margin: 0;
}