TinyMCE Advanced
[resolved] Losing styles from dropdown when posts are saved (20 posts)

  1. cokeyblokey
    Posted 5 years ago #

    I'm using an editor-styles.css file to add styles to the TinyMCE Styles drop-down. When I first visit my dashboard, the correct styles are there but as soon as I save a post or switch from one section of the dashboard to another they disappear from the drop-down. If I then close the dashboard and open again they are back.

    Any suggestions?

  2. Andrew Ozz
    WordPress Dev
    Plugin Author

    Posted 5 years ago #

    Perhaps you can use the Advanced TinyMCE Configuration plugin and add the style names to theme_advanced_styles. More details.

  3. cokeyblokey
    Posted 5 years ago #

    Many thanks Andrew. Your Advanced TinyMCE Configuration plug-in has worked for me. I've added my style names to theme_advanced_styles and they now consistently appear in the drop-down list.

    Thanks again!

  4. Evan Scheingross
    Posted 5 years ago #

    Hey just wanted to say that I was having what I believe to be the same issue.

    I am using the latest release of the tinymce advanced plugin ( set up to pull my custom styles from editor-style.css.

    Everything seemed to work perfectly 100% of the time in FireFox, but in Internet Explorer I was experiencing the issue with the disappearing styles from the Styles drop-down menu. When I initially load the editor in IE the styles would appear, but if I navigated away to another page of the admin panel and came back to the editor the list of styles would disappear.

    I found that logging out of WP and clearing my cache would bring them back, but that's not really an option for my clients so I went ahead and applied the fix recommended in this post. I installed the Advanced TinyMCE Configuration plugin and then manually added my styles under the "theme_advanced_styles" property.

    That seems to be doing the trick, at least as far as my 20 minutes of testing goes.

    As a note to others applying this fix, the styles must be added in the following convention:

    Name to Appear in Styles Menu=className; Another Class Name=anotherclassname; etc...

    I just want the actual class names themselves to appear in the styles drop-down menu so my values look like this:

    alignleft=alignleft; alignright=alignright; brown_subheading=brown_subheading; etc...

  5. RobertMfromLI
    Posted 5 years ago #

    evster: the solution is to never ever use Internet Explorer for anything other than testing the site to see what it's poor standards compliance screws up. Additionally, since Microsoft's "Help us make IE better" default setup means sending all sorts of data about what you're viewing or doing, I personally also NEVER use IE for any back end stuff like admin control panels.

    I for one, after over a decade of catering to the various IE quirks, am about ready to give up on tweaking things to work on IE, or crippling certain features that cannot be gotten working properly. YMMV.

  6. cokeyblokey
    Posted 5 years ago #

    RobertMfromLI - I completely understand your feelings towards IE. Unfortunately it's not always possible to tell my clients not to use IE. I too found that the TinyMCE styles drop-down was working correctly when using FF but both IE and Chrome were losing them. For me to go back to my client and tell them that they are not able to use IE for the dashboard, would jut make me look unprofessional. Trying to convince the client that it's actually Microsoft at fault and not myself or WordPress wouldn't be easy!

    Thanks again to Andrew Ozz for creating these fantastic plug-ins.

  7. Evan Scheingross
    Posted 5 years ago #

    RobertMfromLI - I totally hear you. Personally, I avoid IE as much as possible.

    But unfortunately I'm stuck in cokeyblokey's boat, so for now applying the fix is a must. I'm hoping IE 9 will solve many of these kinds of problems, but who knows?

    And a big thanks for Andrew Ozz for the work on the plug-ins!

  8. RobertMfromLI
    Posted 5 years ago #

    Apologies guys... of all people, I too should know how difficult it can be to get end users to understand such things and follow through - as well as the fact that it ends up being us who look bad (instead of Microsoft) if we dont figure out every kludge to make the various versions of IE work on our sites.

    I've ended up opting for dropping IE6 support. I wish I could go farther - but like you all say, it'll be me that looks bad, not MS. At least with IE6, I can point to the tremendous age of the browser (and lack of further support from Microsoft) as a reason to them for no longer supporting it.

  9. friggasdaughter
    Posted 5 years ago #

    BIG Problem! I have no idea what happened! TinyMCE was working fine and then all of a sudden it will not let me link to any internal anything. The buttons for images, audio don't work and if i click on the insert link button it does nothing and bottom of page just says...javascript;; anyone help!

  10. RobertMfromLI
    Posted 5 years ago #

    friggasdaughter: try closing any wp-admin pages, clearing your cache, restarting your browser and going to the particular admin page again. Sounds like an IE issue?

  11. friggasdaughter
    Posted 5 years ago #

    i have no idea...but magically when i switched my links back to default it all worked! Of course I spent half my day de-activiating other plugins that were installed today in case anything other than IE was an issue, but I have no idea what I did to fix it. I also noticed that removing the time and date buttons seem to fix it too? odd!

  12. MikeHarris
    Posted 5 years ago #

    Hi All,

    Going back to the original problem I cannot find where to remove these default styles. I've searched the entire source code and although there are a couple of references to theme_advanced_styles in form_utils.js and link.js I can't find where aligncenter, alignleft etc are being added.

    I've also searched for the tinyMCE.init function but this does not seem to appear anywhere ... which just doesn't seem possible. I'm very confused right now; any help would be much appreciated.



  13. MikeHarris
    Posted 5 years ago #

    I should point out that I am already using the Advanced TinyMCE Configuration plugin ... I just can't find where to configure it from.


  14. cokeyblokey
    Posted 5 years ago #

    MikeHarris: The settings page for TinyMCE Config can be found under the main 'Settings' tab in the WP Dashboard. From there you have to add 'theme_advanced_styles' to the 'Option name' field, then you need to add your styles to the 'Value' field in the following format:

    Slider Title 1=slider_title_1;Slider Title 2=slider_title_2

    Those are examples from my css. The first part (Slider Title 1) is the name you want to appear in the dropdown. The 2nd part (slider_title_1) is the actual class name from my style sheet. Each style is seperated with a semi-colon (;). The last class in your list should not be followed by a semi-colon.

    Once you have put these in then the default list of styles (alignleft etc) will be replaced with your own.

    Hope this helps.

  15. MikeHarris
    Posted 5 years ago #

    Hey cokeyblokey; thanks for the speedy reply.

    What you're saying makes sense but I still can't see where to add these values - for me the TinyMCE Advanced config screen is split into two sections; the top one (where I can drag in what buttons I want on the toolbar) and the bottom one (which contains a set of "advanced option" tickboxes). Here's a screenshot:


    I dont seem to have any textboxes at all :( Apologies if I'm missing something obvious but I'm still baffled.

    Thanks again, Mike.

  16. cokeyblokey
    Posted 5 years ago #

    Ah, I see what's wrong now - you need to install the 'Advanced TinyMCE Configuration' plug-in. It's actually separate to the 'Advanced TinyMCE' plug-in. You will then get another page under the main WP 'settings' where you can add the values.

  17. MikeHarris
    Posted 5 years ago #

    Superb; works a treat! Thanks for all the help :D

  18. Evan Scheingross
    Posted 5 years ago #

    Just up update on the original issue... It appears to still be happening in WordPress 3.1.3.

    So for now the workaround is to still use the 'Advanced TinyMCE Configuration' plug-in if you need to get your custom styles to show in the WP Admin panel in IE.

  19. Niklas
    Posted 4 years ago #

    I have noticed this bug in Chrome, IE and Safari with the latest WP 3.3 where this code would not always work and theme_advanced_styleselect would sometimes revert to the initial state without showing my custom style:

    function mytheme_custom_tinymce($init) {
        $init['theme_advanced_styleselect'] = 'Ingress=ingress';
        return $init;
    add_filter('tiny_mce_before_init', 'mytheme_custom_tinymce');

    But thanks to you I found the solution with Advanced TinyMCE Configuration.

  20. KennyLL
    Posted 4 years ago #

    We ran into the same issue after working on fixing the problems with 3.4.5 and WP 3.3.1 (styles from editor-style.css not appearing). After getting the styles to show up at all, we then saw them randomly disappearing in Safari.

    So we installed this plugin and it seems to be working so far. And we actually like being able to customize the formatting and styles options that our client will see. But just a couple questions:

    - Is this going to work OK with future version of TinyMCE Advanced when updating?

    - Any drawbacks seen after the few months of working with it?

    - Any resources used by this plugin that wouldn't be normally (we're trying to keep our site a bit lighter so it's not sluggish)?


Topic Closed

This topic has been closed to new replies.

About this Plugin

  • TinyMCE Advanced
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic