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

6 Responses to "Adding Visual editor to WordPress comments box (part 2)"

  1. Jon Brown says:

    Got this working but I’m a bit confused on how to add css styling to the visual editor? It doesn’t seem to load editor-styles.css by default and feeding CSS into wp_editor via the ‘editor_css’ param puts the css outside the iframe… I’m not even sure where the heck the iframe is coming from since there is no iframe on the back end.

    How can I make this visual editor for comments on the front end use a different font?

    Otherwise this is very cool code, thanks for sharing.

    • Reuben says:

      The editor_css settings is for styling the buttons. You need to use content_css argument in the tinymce array
      Example

      wp_editor( '', 'comment', array(
      		'media_buttons' => true,
      		'teeny' => true,
      		'textarea_rows' => '7',
      		'tinymce' => array( 'plugins' => $mce_plugins, 'content_css' => get_stylesheet_directory_uri() . '/editor-style.css' )
      	) );
  2. I added this, but it’s not styles. How can I include its styles?

  3. David C says:

    Reuben, I’m having trouble getting your above code to work with replies in Firefox (and maybe other browsers too). I spent awhile trying to fix this in my theme, then tried your code on a fresh install of WP 3.3.1 and TwentyEleven — still didn’t work. When logged out, the comment box couldn’t be selected and typed in after being moved (when I hit Reply). I know the WP codex says that wp_editor can’t be moved in the DOM, but your comment above suggests that using wp_editor with replies enabled is possible. Any advice?

  4. […] visual editor to WordPress comments box June 22, 2011 | by Reuben Read part 2 for adding visual editor to WordPress comments box using new editor API available in version […]

Leave a Reply