Using this tip, I was able to get the styles (from both the "Styles" and "Format" drop downs) to appear in the content area of the TinyMCE WSYWIG. However, I can't seem to get the actual styles to appear in the dropdown menus themselves; I would assume the option in the drop down for "Heading 1", for instance, would carry the same styling.

The goal can be seen in TinyMCE's full demo:
http://tinymce.moxiecode.com/examples/full.php

The attachment shows what I am seeing right now. Headings 1 and 2 show up as I have defined them in typography.css within the content area - but not in the drop down. (The screenshot doesn't show it, but its the same with the "Styles" drop down.)

I've tried a few different implementation methods of adding styles to the editor, but none seem to solve this specific problem.

Am I missing something?

It works now!! Thanks all and especially Carolg.

Update:

A ran into this question too at first. Chrome has an extra dropdown in the clear cache dialog, so make sure you set it to "Everything" and not "Older than 1 hour" which is what it is by default. This is what got me.

In 2.4.3 it seems to require nothing special. Just add the styles in typography.css.

Suggestions on how to use this feature in a way that is helpful for clients:

This is very powerful and flexible to use this in a simple way by just adding one attribute or color. For example,

.typography .orange
{
color : orange;
}

.typography .italic
{
font-style : italic;
}

Then the user can apply it to an h2 (that may normally be grey) to make it orange, or to a <p> tag, or even a single word or phrase (in which case a <span> tag is created). This is very handy for users that like flexibility. They can use it to override your current settings for individual elements. My clients have really loved it when I use the styles dropdown in this way.

Feature request / Idea:
I'd love to have a way to include some styles and not others. There are some things I'd like to have in typography.css to use in the site, but not necessarily expose to the end user. Anyone got any ideas?

Hi Artyom,

editor.css pulls in all the styles from typography.css so in order to have certain typography styles in the front end but not the editor,
all you'd have to do is move any styles that you do not want showing in the styles dropdown out of typography.css and place it in any other css file that gets included in the front end site. For example, you could create a new css file such as hiddenstyles.css (be sure to do a Requirements::css('path/to/hiddenstyles.css) include in the init function of your Page controller or simply include it in the relevant .SS file.

Then if you put the specific .typography styles in there, it will render in the front end and not show in the editor style dropdown for the client.

Hope that helps...

D-L