tinymce - Add WordPress Core CSS into editor-style.css

I am using a custom child theme (from Parabola, Cryout Creations, lastest version), but it seems that the editor-style.css file is not up-to-date. Rather than rewriting everything, I would like it to contain every css used on the front-end, so TinyMCE looks as close as the published page/article (this is important).

In order to do that, I have created a new editor-style.css file in my child theme, so it overrides the not-up-to-date file. So far, it includes the styles.css file from my theme, but it lacks a lot of CSS from WordPress Core (the one on line 60 on the index file : ).

So, how to add this “core CSS” to my editor-style.css file ? And would it be the best way to do this ? I have seen many stuff talking about the add_editor_style function, but I do not know if I could use it to do what I want nor how.

how can i do this?

I am using a custom child theme (from Parabola, Cryout Creations, lastest version), but it seems that the editor-style.css file is not up-to-date. Rather than rewriting everything, I would like it to contain every css used on the front-end, so TinyMCE looks as close as the published page/article (this is important).

In order to do that, I have created a new editor-style.css file in my child theme, so it overrides the not-up-to-date file. So far, it includes the styles.css file from my theme, but it lacks a lot of CSS from WordPress Core (the one on line 60 on the index file : http://nouveau.domaineloupia.com).

So, how to add this “core CSS” to my editor-style.css file ? And would it be the best way to do this ? I have seen many stuff talking about the add_editor_style function, but I do not know if I could use it to do what I want nor how.

how can i do this?

• css
• tinymce
• editor

Share Improve this question edited Jan 31, 2017 at 17:50 Arsalan Mithani 55344 silver badges1515 bronze badges asked Jan 31, 2017 at 17:33 ArkeenArkeen 10111 bronze badge 6

• you want to add your styles in admin dashboard? – Arsalan Mithani Commented Jan 31, 2017 at 17:37
• Well, only on pages with the TinyMCE editor would be best, but why not if I cannot do so otherwise. – Arkeen Commented Jan 31, 2017 at 17:39
• Well, you can load your css file in admin area through admin_enqueue_scripts tell me if you want me show you how can you load your css file in admin area – Arsalan Mithani Commented Jan 31, 2017 at 17:44
• From the exemple I can see how to load custom CSS on the admin pages, but since I don't know how to find the "WordPress core CSS" file, I cannot use this. – Arkeen Commented Jan 31, 2017 at 17:55
• i am bit confuse from your question, what i understand is : your TinyMCE style file is not updated and you created a new css file name "editor-style.css" with all styles, now you want to totally replace tinymce style file with your newly created file, Right? – Arsalan Mithani Commented Jan 31, 2017 at 18:07

 |  Show 1 more comment

1 Answer 1

Sorted by: Reset to default 0

To add styles that affect TinyMCE you need to do the following:

add_action( 'admin_init', 'editor_styles' );
function editor_styles() {
       add_editor_style( get_stylesheet_directory_uri() . 'editor-style.css' );
}

Basically it will load a editor-style.css file located in the root of your child theme.