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.

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.

share|improve this question
    
I'm dealing with the same thing: I need to style the contents of the iframe generated by wp_editor(). There's supposed to be support for a parameter 'editor_css', which takes inline CSS and one would think apply it to the iframe HEAD or something, but NO - it addes it AFTER the iframe. –  user19318 Aug 16 '12 at 12:28
add comment

3 Answers

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;
}
share|improve this answer
    
Awesome. I'll give it a try. –  jb510 May 18 '13 at 4:34
add comment

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 );
share|improve this answer
    
Can $mystyle here not refer to an external stylesheet? Something like: $mystyle = '<style type="text/css">' . file_get_contents(get_stylehseet_uri()) . '</style>'; That's totally untested code and might be ridiculous, more trying to illustrate an idea. Also obviously, better to point at editor-style.css not the real theme style sheet. –  jb510 Oct 21 '12 at 17:11
    
I tried this and it didn't work. –  Foxinni Dec 6 '13 at 14:05
add comment

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.

share|improve this answer
    
While that would style the iframe element itself, that doesn't style anything inside the iframe. –  jb510 Jun 8 '12 at 23:37
    
Yeah, I see that now. I was just happy to get that transparent background to go away. I've tried using the !important tag on the interior elements to no avail. I'll keep digging. –  Micah Jun 9 '12 at 0:04
add comment

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.