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