Sådan tilføjer du TinyMCE visual editor til kommentar-feltet i WordPress

Helt ærligt, hvor mange almindelige mennesker forstår de dér mystiske HTML koder, som kan bruges i kommentarer til blog-indlæg? I de themes, der følger med WordPress, finder man ofte under kommentarfeltet følgende kryptiske besked:

Disse HTML koder og attributter er tilladte: <a href=”” title=””> <abbr title=””> <acronym title=””> <b> <blockquote cite=””> <cite> <code> <del datetime=””> <em> <i> <q cite=””> <strike> <strong>

Hvis du vil give dine brugere nogle værktøjer til at formatere indholdet i kommentarer med, hvorfor så ikke give dem en ordentlig WYSIWYG editor? Det kunne passende være den, der allerede er indbygget i WordPress, nemlig TinyMCE.

Indsæt blot følgende kodestump i functions.php filen i dit theme:

<?php
add_filter( 'comment_form_field_comment', 'comment_editor' );

function comment_editor() {
	global $post;

	ob_start();

	wp_editor( '', 'comment', array(
		'textarea_rows' => 15,
		'teeny' => true,
		'quicktags' => false,
		'media_buttons' => false
	) );

	$editor = ob_get_contents();

	ob_end_clean();

	//make sure comment media is attached to parent post
	$editor = str_replace( 'post_id=0', 'post_id='.get_the_ID(), $editor );

	return $editor;
}

// wp_editor doesn't work when clicking reply. Here is the fix.
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>
<?php } ?>

Via | Translations: English