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

Question

How can I apply my own css (to match editor-style.css) to wp_editor being used on the front end for comments?

Currently I'm using code from here to enable the visual editor for comments.

My actual code in functions.php:

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 ),
        'editor_css' => '<style> p { font-family: Arial } </style>'
    ) );
    $args['comment_field'] = ob_get_clean();
    return $args;
}

As you can see in the code I'm passing a css style into wp_editor with the editor_css param, however it's getting rendered outside the iframe so it's having no affect.

You can see that style declaration and iframe in the source here.

Answer 1

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;
}

Answer 2

you can't link to style sheet files here rather you can add inline css as follows: In addition to this you can add a custom class, using which you can write css in your main css file.

$mystyle = '<style type="text/css">
           body{margin:0;padding:0}
           </style>';    

$settings = array(
    'editor_css' => $mystyle, 
    'editor_class' => 'myclass'
);
wp_editor($content, $editor_id, $settings );

Answer 3

I'm using the wp_editor() in a form that I'm building for guest posts. In order to get the background to style the way I needed it to, I added the following to my CSS:

.wp_themeSkin iframe{
    background: #FFF !important;
}

This will force it to override the other CSS that's being added to the form.

Answer 4

In WP 3.9.1 when you pass tinymce setting in front-end, it fails to load inlinepopups plugin for some reason.

So you can set editor styles through global variable and it won't break whatever logic they use for loading plugins.

$GLOBALS['editor_styles'] = array(get_stylesheet_directory_uri() . '/css/editor_style.css');