Is there a way to remove the default css from TinyMCE?

Question

I'm working on getting the editor to look more like the front end by adding extra CSS to the TinyMCE rich text editor.

WordPress adds /wp-includes/js/tinymce/skins/lightgray/content.min.css and /wp-includes/js/tinymce/skins/wordpress/wp-content.css by default.

Is there an easy way to remove this?

Answer 1

You should be able to remove these by hooking into the mce_css filter in your functions.php file:

add_filter("mce_css", "my_remove_mce_css");

function my_remove_mce_css($stylesheets){
    return "";
}

I haven't tested this but it should work. You might want to echo out the value of $stylesheets before you return nothing just to see what else is coming through - it might be that you want to retain some of the stylesheets, in which case you could remove the ones you don't want with str_replace.

You can read more about this filter at https://codex.wordpress.org/Plugin_API/Filter_Reference/mce_css

Answer 2

This is what I arrived at. This will remove just the custom wordpress css /wp-includes/js/tinymce/skins/wordpress/wp-content.css.

function squarecandy_tinymce_remove_mce_css($stylesheets)
{
    $stylesheets = explode(',',$stylesheets);
    foreach ($stylesheets as $key => $sheet) {
        if (preg_match('/wp\-includes/',$sheet)) {
            unset($stylesheets[$key]);
        }
    }
    $stylesheets = implode(',',$stylesheets);
    return $stylesheets;
}
add_filter("mce_css", "squarecandy_tinymce_remove_mce_css");

The other file loaded by default (/wp-includes/js/tinymce/skins/lightgray/content.min.css) is not part of the mce_css filter. There does not appear to be any way to remove this without breaking TinyMCE. But of the two css files, this one adds less default things that need to be overridden.

Answer 3

To remove /wp-includes/js/tinymce/skins/lightgray/content.min.css, try this code in your functions.php.

add_filter('tiny_mce_before_init', function($init){
    $init['init_instance_callback'] = 'function(){'
        . 'jQuery("#content_ifr").contents().find("link[href*=\'content.min.css\']").remove();'
    . '}';
    return $init;
});

I don't know it's right way, but works well.