I've seen I can included the "Format" editor option, and then apply a H2, and then apply an additioanl style using the styles dropdown.

Just looking at how/where I can customize what appears in the "Format" dropdown, as it's not taking whats in the CSS file.

In order to add your stuff to tinyMCE Format dropdwn you may need to following things:
1) Create new CSS file located somewhere in your site (mark it as part of project - build action content in order to get it over to target server as well). Let's say - /Content/editor.css
2) Specify this file as tinyMCE available format styles in episever.config file - search for `uiEditorCssPaths` attribute under `siteSettings` element.
3) Add your custom styles in this file. Sample:

h1 {
    EditMenuName: Heading 1;
    margin: 40px 0 30px;
}

h2 {
    EditMenuName: Heading 2;
    margin: 30px 0 10px;
}

4) Newly added styles should be now visible in Format dropdown list.

To change class for selected element you may need to use `ChangeElementType` CSS rule. Info at the very bottom of the page you mentioned. This should generate new `h1` element with class `italic` for any selected text in your tinyMCE editor:

h2.italic
{
   ChangeElementType: true;
   EditMenuName: Heading 2 Italic;
   font-style: italic;
}

Thanks Validid, the following worked for me:

h2.h3
{
   ChangeElementType: true;
   EditMenuName: Heading 2 H3;
}

I was also able to control what appears in the format dropdown, using the following method:

1. Creating an empty class, with a TinyMCEPluginNonVisual attribute

    [TinyMCEPluginNonVisual(AlwaysEnabled = true,
    PlugInName = "EditorSettings",
    DisplayName = "Init options",
    Description = "Custom editor init options.",
    EditorInitConfigurationOptions = @"{  
        paste_auto_cleanup_on_paste : true,  
        theme_advanced_blockformats : ""h1,h2,h3,h4,p,div"",
        theme_advanced_styles : ""Introduction=introduction;Date=date"",  
        theme_advanced_resizing : true }")]
    public class EditorSettings { }

2. The above causes a js error when it tries to reference a missing file, so I create the following handler:

    public class EmptyFileHandler : IHttpHandler
    {
        public bool IsReusable
        {
            get { return true; }
        }

        public void ProcessRequest(HttpContext context)
        {
        }
    }

and added the following to my config file:

  <location path="util/editor/tinymce/plugins">
    <system.webServer>
      <handlers>
        <add name="EditorSettings" path="/util/editor/tinymce/plugins/EditorSettings/editor_plugin.js" verb="GET" type="EPiServer.Templates.xxx.Business.EmptyFileHandler, EPiServer.Templates.xxx.MVC" />
      </handlers>
    </system.webServer>
  </location>

The question that still remains however is how (if it's even possible) I can create a TinyMCE style sheet, but get the actaul styles from my main site CSS file..
I don't want to reference it directly, as that causes 100's of items to appear in the dropdown. What I don't also want to do is manually create this, as it causes duplication. The front end devs are using saas to generate their style sheets, and have said that a 2nd sheet could be generated, but this would not include the Tiny MCE specific attributes like ChangeElementType, EditMenuName etc..

Any thoughts?

Usually `editor.css` and `site.css` are separate files. I would look for some auto-generation tools that would extract related styles from `site.css` and copy them over to `editor.css` file with required tinyMCE editor rules added.

Thanks.

I've actaully had a conversation with the CSS devs, and they said something along those lines should be possible, which is great news!

Cheers
Danny

HI guys,

I have the same problem as Danny.

i have 2 css files.. One with my styles to be used in the TinyMCE editor dropdown like so

~/static/css/editor.css

h2
{       
    EditMenuName: Heading 2;
}
h3
{
    EditMenuName: Heading 3;
}
h4
{
    EditMenuName: Heading 4;
}

Now i'm getting the styles in the dropdown. 

So far good, now i get the second style sheet from our frond-end devs with the styles for the site, so that it would just reflect in the TinyMCE editor (NOT the dropdown).

However if i add that file to the 'uiEditorCssPaths="~/static/css/editor.css,~/css/editor.css" 

Now what i wanted it to have my first style sheet still show in my dropdown, and the second to just reflect the (site)styling in my editor. But what happens now is, that my dropdown gets cluttered with all the element from my second style sheet. 

Now i was wondering what Valdis meant with:  "I would look for some auto-generation tools that would extract related styles from `site.css` and copy them over to `editor.css` file with required tinyMCE editor rules added." 

I think the clue is in the last part. 

I need to point our that the second editor.css is generated by the frond-end devs from saas and minified (which is quite big). 

Any help on how to overcome this problem?? thanks guys

I think* that using something like @import '/css/basic.css' in the editor file won't clutter the styles dropdown with the styles from basic.css but still get the correct styling in the editing area.

* There might be some other tricks involved, I can check later if needed.