TinyMCE Advanced, WordPress 3.0, Google Chrome, Custom Styles

I was using the TinyMCE Advanced plugin for WordPress and needed to add some custom styles to it for a client.  I kept Googling it and everyone seemed to think it was very easy.

I was at a loss.

There were all the suggestions to clear your browser’s cache if you were on Firefox.  I was using Chrome and thought I would give it a try.  No luck.  After about an hour, I finally closed my tab and opened a new tab in my browser.  Holy crap! Styles came in, but they were old styles that I was playing around with earlier.

I cleared the cache again, closed my tab, opened it back up, and low and behold, my styles that I defined in wp-content/plugins/tinymce-advanced/css/tadv-mce.css finally showed up correctly.

Now, to get them to show up on the front side, I just added the classes to my themes stylesheet and it worked.

Advertisements

6 Comments (+add yours?)

  1. Phil Lavin
    Aug 20, 2010 @ 08:26:49

    Fix actually appears to be caching related. I fixed by removing the caching stuff from /wp-includes/js/tinymce/wp-tinymce.php

    Change the Expires: and Cache-Control: header lines to the following:

    header(‘Expires: ‘ . gmdate( “D, d M Y H:i:s”, time()) . ‘ GMT’);
    header(“Cache-Control: public, max-age=0”);

    This should fix the issue in Chrome, Safari, IE6 and IE7 of the custom styles loading in the first time the page is loaded but not on any other occasions.

    Phil

  2. senica
    Aug 20, 2010 @ 13:41:11

    @Phil,
    If styles are the only thing you need from the tinymce-advanced plugin, you should try adding this to your functions.php file.

    //TinyMCE Custom Styles
    if ( ! function_exists( 'my_formatTinyMCE' ) ) :
    function my_formatTinyMCE($init) {
      $init['theme_advanced_buttons2_add'] = 'styleselect';
      $init['theme_advanced_styles'] = 'Content-Paragraph-Header=content-paragraph-header,Content-Paragraph=content-paragraph';
      return $init;
    }
    endif;
    add_filter('tiny_mce_before_init', 'my_formatTinyMCE' );
    

    This line: $init[‘theme_advanced_styles’] is a comma separated list of styles. The first part before the equal sign “Content-Paragraph-Header” is what will appear in the styles dropdown in the admin. The second part after the equal sign “content-paragraph-header” is the name of the actual class that will get added to the content you select in the admin.

    Then in your styles.css file, you can define a class such as .content-paragraph-header and when your page renders it will use that style.

    I stopped using tinymce-advanced as I kept having issues with it.

    -Senica

  3. Phil Lavin
    Aug 20, 2010 @ 13:43:37

    Cool, thanks 🙂

  4. Nicole
    Apr 30, 2011 @ 16:33:02

    Thank you! I’ve been banging my head against the wall trying to get this to work.

    I love chrome, but this isn’t the first time I’ve had caching-related issues with it…

  5. senica
    May 01, 2011 @ 18:31:58

    No problem. Glad it could help out. It’s always the simple things that gets us.

  6. Ian
    May 27, 2011 @ 14:14:33

    @senica that’s the best solution I’ve come across, thanks! I wonder if there’s a way to reference a stylesheet instead of the comma-separated list? But then I suppose you couldn’t pick a custom name to appear in the menu, which i like.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: