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

After adding the snippet, the comments box should look like the below screenshot.

TinyMCE in WordPress comments form

11 Responses to "Adding visual editor to WordPress comments box"

  1. […] issues with implementation of Visual editor to WordPress comments box with the method explained in part 1. Some of the issues are:Difficulty in including tinyMCE language filesThe Visual editor does not […]

  2. Josh says:

    I love this little hack. I’m working on using it in my plugin. I had to add a few lines of code to get it to use the default text during mouseover of each of the buttons.

    One question, I can’t seem to get it to work in the reply section of the comments. It works great for a new comment, however when clicking reply, the tinymce box seems to get “stuck”.

    Have you had any experience with this?

    • ReubenReuben says:

      Tinymce editors are rendered in iframes. Browsers reset/re-render the iframe if you move them. The alternative solution is to initialize the tinymce editor again (this will require extensive javscript coding).

    • ReubenReuben says:

      The issues can be overcome by utilizing the new Editor API in WordPress 3.3. Check part 2 for the snippet.

  3. Ankit says:

    Thanks for such a valuable article. But i want to ask how i can add upload image option too in editor??

    • ReubenReuben says:

      Change this line to

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

      to

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

      .

      You will also need to include the tinymce language files:

      <script type="text/javascript" src="<?php echo includes_url( 'js/tinymce/langs/wp-langs-en.js' ); ?>">
      </script>
      
  4. Quick question: Any way to make the comment box bigger?

  5. This is exactly what I was looking for. Thank you so much for it. I couldn’t find a plugin that works as well as the script you’ve given here.

Leave a Reply