How to add a strip of visual editor on top of comments textarea

2 Views

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?

Read More

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.

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. 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?

  2. 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