Archives For "tinymce wordpress comments box" tag

Adding Visual editor to WordPress comments box (part 2)

January 5, 2012 | by Reuben

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

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