How to add editor-style.css styling to wp_editor on front end for comments

Actually you can include the editor-style.css (or any other stylesheet), just pass a “content_css” value to tinymce that points to a css file:

wp_editor( 
    $content, 
    'editablecontent', 
    array( 
       'tinymce' => array( 
            'content_css' => get_stylesheet_directory_uri() . '/editor-styles.css' 
       ) 
    );

So the original posters code would look like:

add_filter( 'comment_form_defaults', 'custom_comment_form_defaults' );
function custom_comment_form_defaults( $args ) {
    if ( is_user_logged_in() ) {
        $mce_plugins="inlinepopups, wordpress, wplink, wpdialogs";
    } else {
        $mce_plugins="fullscreen, wordpress";
    }
    add_filter( 'wp_default_editor', create_function('', 'return "tinymce";') );
    ob_start();
    wp_editor( '', 'comment', array(
        'media_buttons' => false,
        'teeny' => true,
        'textarea_rows' => '7',
        'tinymce' => array( 
            'plugins' => $mce_plugins, 
            'content_css' => get_stylesheet_directory_uri() . '/editor-styles.css'
        )
    ) );
    $args['comment_field'] = ob_get_clean();
    return $args;
}

Leave a Comment