Main Goal: I am working on a site for a client and they wish to have custom css styles applied to the text in the backend visual editor tinymce. Nothing too crazy, just some basic link and list styling. However, I can’t get my main stylesheet to apply. I’m a bit new to wordpress development, so I’m not sure how to approach the problem.
What I have tried:
First I tried just targeting styles within body#tinymce as a selector, but it doesn’t work.
Secondly, I tried adding another stylesheet. I had to apply custom styles to the guttenberg block editor as well, and this article was very helpful in showing me how to do that. I tried to add another stylesheet in a similar way, but it was unsuccessful. (I’m not sure if that method ONLY works for block editor. )
Third, I have tried editing the styelsheet I made for my block editor using the method above and just inserting the styles in there with my same body#tinymce selector, but again, it does not work.
Fourth, I looked into the Tiny MCE Custom Styles plugin, but it doesn’t really do what I’m looking for. It’s basically a GUI to make it easy for users to add styles, but they aren’t applied automatically. The plugin adds a “format” tab in visual editor that you have to click on to activate your styles, but I want them active by default. I have considered digging through the plugin’s code to see what logic they are using to apply those styles to the tinymce body, but I’m less familiar with php so it sounds like a pretty daunting task (if it’s even possible), and I’m curious if there may be an easier way to attack this that I am missing.