Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

My blog is WP3.1.2, theme: Twenty Ten

I would like to add a strip of visual editor on top of the comments box (something like you see at the top of question box on this site). How can I do it WITHOUT PLUGINS?

I have searched this site and the WP forums, but could not find something I could use.

Although WP displays html tags beneath the comments box that people can use to style their comments. But not everybody is fimiliar with them and how to use them. So instead I woild like to display a strip of tags for people to use easily.

Simple to follow instructions please. Thanks.

share|improve this question

2 Answers 2

Simple-to-follow instructions would be something like:

  1. Install the Comment Form Quicktags Plugin

But for some reason, you have specified that you want to do it "WITHOUT PLUGINS". Further, you have specified "simple to follow instructions".

I do not believe your requirements are compatible. If you want "easy to follow instructions", then use a Plugin. If you don't want to use a Plugin, then you'll have to figure out how to replicate the (non-trivial, and thus, not really "easy to follow") implementation in such a Plugin.

Why do you not want to use a Plugin?

share|improve this answer
    
thanks for your advice. I am actually not a big fan of plugins - on the long run they create more roblems than help. I thought this might be something relatively easy to implement since WP already comes with tinymce. Thanks any how. Which plugin would you recommend for this? –  Tara May 2 '11 at 17:51

Maybe somebody can grab this and run with it....It's a mostly (I think) finished slop of code from various places. I would credit if I remebered where parts came from....

// COMMENT FIELD EXPERIMENT
// LOADS REQUIRED FILES FOR TINYMCE ON FRONTEND
function voodoo_load_scripts() {
    // scripts (and styles) for media uploads
    add_thickbox();
    $media_upload_js = "/wp-admin/js/media-upload.js";
    wp_enqueue_script( 'media-upload', get_bloginfo('wpurl') . $media_upload_js, array( 'thickbox' ), filemtime( ABSPATH . $media_upload_js ) );

    // utils depdency for tinymce
    $utils_js = "/wp-admin/js/utils.js";
    wp_enqueue_script( 'utils', get_bloginfo('wpurl') . $utils_js, array( ), filemtime( ABSPATH . $utils_js ) );
}


function voodoo_tinymce_config($initArray) {
    $initArray['theme_advanced_resize_horizontal'] = false;
    $initArray['theme_advanced_path'] = false;
    return $initArray;
}

add_filter('tiny_mce_before_init', 'voodoo_tinymce_config');

// LOADS UP TINYMCE
function voodoo_load_tinymce() {
    require_once( ABSPATH . "wp-admin/includes/post.php" );
    wp_tiny_mce();
}

add_action( 'wp_head', 'voodoo_load_tinymce' );

//BUILDS A LIST OF ALLOWED TAGS
function voodoo_allowed_tags() {
    global $allowedposttags, $allowedtags;

    if ( ! defined( 'CUSTOM_TAGS' ) )
        define( 'CUSTOM_TAGS', true );

    $allowedposttags = array(
        'strong' => array(),
        'em' => array(),
        'u' => array(),
        'span' => array(
            'align' => array (),
            'class' => array (),
            'id'    => array (),
            'style' => array (),
        ),
        's' => array(),
        'p' => array(
            'align' => array (),
            'class' => array (),
            'id'    => array (),
            'style' => array (),
        ),
        'address' => array(),
        'pre' => array(
            'style' => array(),
        ),
        'h1' => array(
            'align' => array (),
            'class' => array (),
            'id'    => array (),
            'style' => array (),
        ),
        'h2' => array (
            'align' => array (),
            'class' => array (),
            'id'    => array (),
            'style' => array (),
        ),
        'h3' => array (
            'align' => array (),
            'class' => array (),
            'id'    => array (),
            'style' => array (),
        ),
        'h4' => array (
            'align' => array (),
            'class' => array (),
            'id'    => array (),
            'style' => array (),
        ),
        'h5' => array (
            'align' => array (),
            'class' => array (),
            'id'    => array (),
            'style' => array (),
        ),
        'h6' => array (
            'align' => array (),
            'class' => array (),
            'id'    => array (),
            'style' => array (),
        ),
        'ul' => array(),
        'ol' => array(),
        'li' => array(),
        'blockquote' => array(
            'id' => array (),
            'cite' => array (),
            'class' => array(),
        ),
        'a' => array(
            'href' => array(),
            'title' => array(),
            'name' => array(),
            'target' => array(),
        ),
        'img' => array(
            'class' => array(),
            'style' => array(),
            'src' => array(),
            'alt' => array(),
            'width' => array(),
            'height' => array(),
        ),
        'sup' => array(),
        'sub' => array(),
        'br' => array (
            'class' => array()
        )
    );

    $allowedtags = array(
        'strong' => array(),
        'em' => array(),
        'u' => array(),
        'span' => array(
            'align' => array (),
            'class' => array (),
            'id'    => array (),
            'style' => array (),
        ),
        's' => array(),
        'p' => array(
            'align' => array (),
            'class' => array (),
            'id'    => array (),
            'style' => array (),
        ),
        'address' => array(),
        'pre' => array(
            'style' => array(),
        ),
        'h1' => array(
            'align' => array (),
            'class' => array (),
            'id'    => array (),
            'style' => array (),
        ),
        'h2' => array (
            'align' => array (),
            'class' => array (),
            'id'    => array (),
            'style' => array (),
        ),
        'h3' => array (
            'align' => array (),
            'class' => array (),
            'id'    => array (),
            'style' => array (),
        ),
        'h4' => array (
            'align' => array (),
            'class' => array (),
            'id'    => array (),
            'style' => array (),
        ),
        'h5' => array (
            'align' => array (),
            'class' => array (),
            'id'    => array (),
            'style' => array (),
        ),
        'h6' => array (
            'align' => array (),
            'class' => array (),
            'id'    => array (),
            'style' => array (),
        ),
        'ul' => array(),
        'ol' => array(),
        'li' => array(),
        'blockquote' => array(
            'id' => array (),
            'cite' => array (),
            'class' => array(),
        ),
        'a' => array(
            'href' => array(),
            'title' => array(),
            'name' => array(),
            'target' => array(),
        ),
        'img' => array(
            'class' => array(),
            'style' => array(),
            'src' => array(),
            'alt' => array(),
            'width' => array(),
            'height' => array(),
        ),
        'sup' => array(),
        'sub' => array(),
        'br' => array (
            'class' => array()
        )
    );
}

add_action( 'init', 'voodoo_load_scripts' );
add_action( 'init', 'voodoo_allowed_tags' );

//PUT IT IN OUR FORM

add_filter( 'comment_form_defaults', 'voodoo_comment_form_defaults' );

function voodoo_comment_form_defaults( $defaults ) {

    $defaults['comment_field'] = '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'twentyten' ) . '</label><textarea class="theEditor" id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>';

    return $defaults;
}

So here's what it do. We load up all the crap we need for tinymce. But tinymce allows for html tags which WP doesn't allow from the front end. So we need to account for em. Then at the bottom we need to add the theEditor class to the comment form. Since I use commentform in my theme, I can hook into it. If you don't, you can add the class directly to the textarea.

This adds the editor to the comment form. But the work isn't done. It looks like crap, and I got bored working with it. Maybe someone can make it look nice, I dunno if it's just css conflicts or what.

Also, all the html tags we allow now get listed under the comment form in the allowed tags section. Probably best to hide them completely, that info isn't needed anyway if you get the tinymce working.

It still needs work, and only works as is when logged in..... so if you can find a plugin, that may be the way to go I'd say

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.