add_editor_style is not loading in frontend. Any solution?

Question

This is default wordpress add_editor_style function:

function add_editor_style( $stylesheet = 'editor-style.css' ) {

    add_theme_support( 'editor-style' );

    if ( ! is_admin() )
        return;

    global $editor_styles;
    $editor_styles = (array) $editor_styles;
    $stylesheet    = (array) $stylesheet;
    if ( is_rtl() ) {
        $rtl_stylesheet = str_replace('.css', '-rtl.css', $stylesheet[0]);
        $stylesheet[] = $rtl_stylesheet;
    }

    $editor_styles = array_merge( $editor_styles, $stylesheet );
}

As you see if ( ! is_admin() ) return; is there and basically we cant add custom styles to frontend wp_editor.. What is proper solution for it?

Answer 1

Here is my solution:

add_filter('the_editor_content', "firmasite_tinymce_style");
function firmasite_tinymce_style($content) {
    add_editor_style('assets/css/custom.css');

    // This is for front-end tinymce customization
    if ( ! is_admin() ) {
        global $editor_styles;
        $editor_styles = (array) $editor_styles;
        $stylesheet    = (array) $stylesheet;

        $stylesheet[] = 'assets/css/custom.css';

        $editor_styles = array_merge( $editor_styles, $stylesheet );

    }
    return $content;
}

Live Example: http://unsalkorkmaz.com/firmasite-social-buddypress-bbpress-theme-based-on-bootstrap/ Check comments wp_editor.. its loading bootstrap.css and google fonts etc..

This code is extra:

// Removing wordpress version from script and styles
add_action("wp_head", "firmasite_remove_version_from_assets",1);
function firmasite_remove_version_from_assets(){
    function remove_cssjs_ver( $src ) {
        if( strpos( $src, '?ver=' ) )
            $src = remove_query_arg( 'ver', $src );
        return $src;
    }
    add_filter( 'style_loader_src', 'remove_cssjs_ver', 999 );
    add_filter( 'script_loader_src', 'remove_cssjs_ver', 999 );
}

Its removing version from styles and scripts. So browser wont load same style double times.

Answer 2

add_editor_style is not meant to load a stylesheet on the front end. It is meant to make the visual editor display on the backend of the site look more like the final version of the post on the front end. There is no filter (you found the function source) that lets you change that behavior.

If you have an editor on the front end, style it just like you style anything else- on the front end-- by editing style.css or by conditionally loading another stylesheet with wp_register_style, wp_enqueue_style, and wp_enqueue_scripts

function load_front_editor_style_wpse_87256() {
  if (!is_page_template('editor.php')) return false;
  wp_register_style( 'fedstyle', get_stylesheet_directory().'/path/to/stylesheet', false, null, 'all' );
  wp_enqueue_style( 'fedstyle' );
}
add_action( 'wp_enqueue_scripts', 'load_front_editor_style_wpse_87256' ); 

I don't know how your editor works but I included a condition that should only load the editor on a template named editor.php. I am sure that is wrong but should be illustrative.

Caveat: I don't know what your front end editor is or how it works. I am assuming it is the core editor that you've loaded on the front. I know that directly editing an admin stylesheet (appropriate or not) will alter the appearance of the backend editor. The same thing should be true on the front.

http://codex.wordpress.org/Function_Reference/get_stylesheet_directory
http://codex.wordpress.org/Function_Reference/is_page_template