Custom css for backend editor

[dabu]

Some of my custom CSS for the frontend I also need in the backend text editor for it to be clear for the user.

I noticed that the CSS of the text editor is defined in:

…/themes/lay/setup/assets/css/tinymce_defaults.css

Is there a way to add another CSS file to the tinyMCE editor?

I was able to do it for the Gridder preview with this function:

function kd_custom_style() {
   wp_enqueue_style('admin-styles', '/wp-content/themes/lay_eigenes/admin-style.css');
}

add_action('admin_enqueue_scripts', 'kd_custom_style');

But that doesn't work in the tinyMCE editor, because it opens as an iframe. How can I insert the CSS-file to this iframe?

[arminunruh]

add_editor_style( Setup::$uri.'/setup/assets/css/tinymce_defaults.css' );

you can find this line in the code of lay theme by searching for tinymce_defaults.css
i hope it will lead u into the right direction

lay theme doesnt support child themes
its probably better to code a wordpress plugin that inserts your custom code than to use a child theme

if there is an update one day that is not compatible with your child theme, you will have to activate the original lay theme for the website to work

or debug your child theme, meaning u'd have to find differences between the child theme and lay theme and then transport all differences from lay theme to ur child theme

if you dont use a child theme but simply just change the code of a copy of lay theme, this is also not a good idea since every lay theme update will overwrite your code changes

[dabu]

Thank you! I'm aware that Lay doesn't support child themes, and I want to avoid changing stuff in the lay theme folder.

The above mentioned function (function kd_custom_style()) I added with the CodeSnippet Plugin. I was trying to do the same with the tinymce-CSS, but didn't succeed.

I found your line in the setup.php file, but I didn't find out how I can use it by putting the code in the CodeSnippet that runs in the backend.

Changing the URL to my file didn't do the job, seems like there needs to be more code. So if you or anybody else can give me more hints, that would be greatly appreciated!

tinyMCE has some help with the topic, but I didn't manage to make it work. That's what I found:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css: '/myLayout.css'  // resolved to http://domain.mine/myLayout.css
});

[arminunruh]

https://developer.wordpress.org/reference/functions/add_editor_style/

it should work

if it doesnt, i dont know

[dabu]

Great, thank you so much Armin!

It worked with this code:

function wpdocs_theme_add_editor_styles() {
    add_editor_style( 'https://www.thisismydomain.com/wp-content/themes/lay_eigenes/admin-style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );

/themes/lay_eigenes/ is just a folder with my CSS files, no child theme.

[arminunruh]

ok very good