1

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?

2

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

  • 1
    Thanks Tim - this totally helped. This removes all the styles completely, but it's the right filter to use. – squarecandy Mar 12 '16 at 5:45
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.

  • Don't forget you can accept your own answer using the checkmark on the left - it'll show others that this is the solution you came to :) – Tim Malone Jul 6 '16 at 3:57
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.