Question 249952 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Applying custom styles to acf tinymce visual editor in WordPress backend

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.

TL;DR I wish I could just add some custom css styles to the body of the tinymce visual editor on the back end but I haven’t figured out a way to do this.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks. That looks like it might work although I have not tried it. I did get it working on my project though. The key was using the add_editor_style() method in the functions.php (or inc/custom.php on my project), and creating another separate stylesheet in the theme directory. Specifically, the user contributed notes at the bottom of the page were what worked for me. Pasted them in the right locations exactly and they worked.


  2. 0

    I believe this should do the trick:

    add_action( 'after_setup_theme', 'add_tinymce_styles' ));
function add_tinymce_styles() {
     add_theme_support('editor-styles');
     add_editor_style('path/to/your/stylesheet.css');
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search