Theme Visual Editor Styles

Beaver Builder
1

Hello,
I noticed that the Beaver Builder Plugin doesn’t load the theme’s editor-style.css sheet in the visual editor. Is there a way to do this without hacking the plugin core? I could get the stylesheet to load by adding the following to the class-fl-builder.php file after line 162:


    $theme_editor = get_template_directory() . '/editor-style.css';
    if (file_exists($theme_editor)) {
        $mce_css .= ',' . get_template_directory_uri() . '/editor-style.css';
    }

Might be a suggestion for future releases?

2

Hey Jeremy,

Welcome to the BB forums! :slight_smile:

Our thinking is that it should be the theme that is responsible for loading custom stylesheets to the TinyMCE editor. Another issue with baking that in to the plugin is the stylesheet could be anywhere on the theme, e.g., it could be inside the /css/ directory or perhaps under /assets/css/ for that matter.

You can, however, add that stylesheet via the function below.

function my_editor_style( $stylesheets ) {  
    if ( FLBuilderModel::is_builder_active() ) {
        $stylesheets .= ! empty( $stylesheets ) ? ',' : '';
        $stylesheets .= get_stylesheet_directory_uri() . '/editor-style.css';
    }
    return $stylesheets;
}
add_filter('mce_css', 'my_editor_style');

Give it a shot and let us know how it goes!

Ben

2 Likes
3

Awesome, that works great. And I see your point about not baking it in to the plugin. Thank you!

4

Hi Jeremy,

Thanks for informing us your issue has been resolved.

Thanks,
Danny