bbPress.org

One of the problems I’ve encountered in trying to use the TinyMCE editor in bbPress is styling the text inside the editor itself. The default fonts are serif, but suppose you want sans?

Attempting to override the font-family in the usual way — by modifying your theme’s CSS file — fails because the editor window of TinyMCE is in it’s own tiny little world as far as CSS is concerned.

In order to get TinyMCE to use your own stylesheet, you have to pass it as an argument when the editor is called. Here’s how to do it in bbPress.

function bbp_enable_visual_editor( $args = array() ) {
    $args['tinymce'] = array( 
            'content_css' => '/wp-content/themes/mytheme/css/tinymce-editor.css',
        );
    return $args;
}
add_filter( 'bbp_after_get_the_content_parse_args', 'bbp_enable_visual_editor' );

In the example above, “tinymce-editor.css” is the CSS file you want the editor to use. It is located in a folder entitled “CSS”, which is located in your theme folder “mytheme”. The code above can be copied and pasted into your functions.php file.

Other options for the editor can be found here. Notice that the value for “tinymce” can be an array. That’s what we’re doing above.

Additional arguments to pass in the array for the TinyMCE editor can be found here.

I hope this helps someone. The documentation for styling the editor text could be improved. I banged my head on this problem for years until I stumbled on the solution elsewhere.