TinyMCE Advanced lost custom formats on upgrade to 4.0,2

The “formats” button in TinyMCE 4.0 works differently/contains some different items than in TinyMCE 3.x.

Can you suggest where I might learn about how to use the Formats button in TinyMCE 4.0? I’m not a theme developer; I’m just trying to make a few custom CSS classes available in the Visual editor for my content authors who are unfamiliar with HTML.

First you will probably want to add the “Formats” drop-down to one of the toolbars.

Setting the items is more involved but gives you a lot of power ?? You can add classes, inline css, even redefine how the build-in formats work. More info here: https://www.tinymce.com/wiki.php/Configuration:formats (note: you can choose to append to the current drop-down items or replace them).

Thanks for the info. Unfortunately, that takes it right out of my ballpark. Sorry to hear it has gotten so much more complex.

Well, you can still import the styles from editor-style.css and replace the “formats” drop-down by selecting the checkbox in the advanced settings..

That’s what I had done that worked in the previous version. Can you tell me if I left any steps out?

1. Edited the editor-style.css in my theme’s directory by adding the classes I want to show up in the visual editor (for example, buttonGold).
2. In TinyMCE Advanced, dragged the Formats dropdown to my toolbar. In the Advanced Options section, enabled the option to “Load the CSS classes used in editor-style.css and replace the Formats button and sub-menu.”

In both Pages and Posts, the TinyMCE Advanced toolbar of the Visual editor has a Formats dropdown, but the only items on its list are the standard ones (for example, alignleft, wp-caption). Those are in my editor-style.

Any ideas?

URL: https://acchs.edu/

Couple of things to check:
* Make sure you edited the “right” editor-style.css. This can be checked by looking in the browser console in the editor iframe head and confirming the URL for it.
* Browsers tend to cache iframe content more vigorously. Empty the cache after any change to editor-style.css.

It was the “wrong” editor-style.css. My site uses a child theme but TinyMCE is drawing its Formats from the parent theme. Just duplicated child theme editor-style.css and copied it into the parent theme.

Now I just have to remember to do that on the next theme update!

Thanks for your help.