A while back I asked Jordan if he knew how to get the Rich Text Editor in Concrete5 to recognize changes to the typography.css file. His response: "clear browser cache, clear C5 cache, do a dance and pray".

That seemed about right. For as long as I can remember, I've grumbled when making changes to that file because it was always such a weird battle getting the edits to appear.

The other day it hit me to try pairing our cache busting technique with the getThemeEditorCSS() override described in our post about renaming/moving the typography.css file. To my delight, it actually worked really well.

The Solution

Take the following code from our post about renaming/moving the typography.css file.

public function getThemeEditorCSS() {
    $theme_dir = $this->ptURL . '/';
    $css_file = 'css/tinymce.css'; //<--change this as needed
    return $theme_dir . $css_file;
}

Note: if you're wondering why the above code references tinymce.css instead of typography.css, check out that blog post. Otherwise, just think of them as being the same thing.

All we need to do is apply one of our cache busting techniques to the CSS reference.

The query string approach would look like:

$css_file = 'css/tinymce.css?version=' . CUSTOM_THEME_ASSET_CACHE_BUST_NUMBER;

Note: CUSTOM_THEME_ASSET_CACHE_BUST_NUMBER is described in our cache busting technique post, but it's basically just a number we defined in our site config.

And the filename-based cache busting approach would look like:

$css_file = 'css/tinymce' . CUSTOM_THEME_ASSET_CACHE_BUST_NUMBER . '.css';

After incorporating this, CSS edits have consistently appeared in the Rich Text Editor immediately - without any special dances or prayers.