revood

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. 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?

    • 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).

    • 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>
      

Leave a Reply