I'm not sure why all editor.css classes are added to the list initially (seems counter-productive as these are very likely not styles that you'd use in your template designs).

The image editor is part of TinyMCE, but it not the same as the XHTML editor you would add styles to using the uiEditorCssPaths attribute.

For the image editor you'd probably need to override some init settings.

Googled this quickly: http://www.tinymce.com/wiki.php/Configuration:image_class_list

tinymce.init({
    plugins: "image",
    image_class_list: [
        {title: 'None', value: ''},
        {title: 'Dog', value: 'dog'},
        {title: 'Cat', value: 'cat'}
    ]
});

Here's an example of how to include your new init settings for tinymce: http://krompaco.nu/2010/05/alter-default-initoptions-for-tinymce-in-episerver-6/

Thanks for the input Arild you led me in the right direction and I got it working now.

I discovered that the plugin in question was "advimage" and not image

http://www.tinymce.com/wiki.php/Plugin3x:advimage

That plugin has an option named

theme_advanced_styles

http://www.tinymce.com/wiki.php/Configuration3x:theme_advanced_styles

If that option is not defined TinyMCE lists the classes imported from the editor.css.

So I have it configured like this now 

theme_advanced_styles : "Image left=img-left;Image right=img-right;"

Good stuff, Peter! I should have recognized that.

For future reference, here's a blog post showing how to get EPiServer to pick up the custom theme_advanced_styles settings (CMS 6):

http://tekniken.nu/utveckling/installningar-for-tinymce-i-episerver-6

I tried the blog post with EPiServer 7.5 but it doesn't work for me. My TinyMCEeditors lost the will to live. Literally.

The PluginName had to be advimage so the example for CMS 6 while good was just confusing as it doesn't work as-is for CMS 7. So thank you to both of you guys - the clues were all there it just required a bit of detective work to get there in the end.

This worked for me:

using EPiServer.Editor.TinyMCE;

    [TinyMCEPluginNonVisual(AlwaysEnabled = true,
    PlugInName = "advimage",
    DisplayName = "Init options",
    Description = "Init options for the HTML editor",
    EditorInitConfigurationOptions = @"{
          paste_auto_cleanup_on_paste : true,
          theme_advanced_styles : ""Image left=img-left;Image right=img-right;"",
          theme_advanced_resizing : true }")] 

    public class TinyMceSettings
    {

    }

I'm trying to get this working on an EPiServer 8 site, but am not having any success using the code in the previous comment.

Has anything changed in recent versions which would stop this working?

I also wanted to add some "theme_advanced_styles" to TinyMCE in edit mode. It looks like "TinyMCEPluginNonVisual" code that "John Walsh" was posted not working in EPiServer 8. Can anybody tell how to use this code in EPiServer 8 and above ?

Me three!

This works in v9 at least: https://github.com/BVNetwork/CommerceStarterKit/blob/master/src/web/Content/css/editorNames.less

Can't remember if I had to do anything else to make it work, but I don't think so. Key to having them in the image dialog is to use the img tag specifier in the css.

/Steve

All I am trying to get this working in an Episerver 9 project. I have had zero success. It doesn't even look like the alloy build was able to acomplish this, and much of the documentation linked above has moved. Could someone please point me in the correct direction? 

Note: the tinymce "styles" drop down is working fine. it is the advimage class dropdown that is not being populated.

Hi Joshua,

that is strange. I've got this working on a demo site (check that editornames.less link above).

Given - this is EPiServer.CMS.Core 9.7.2 (EPiServer.CMS.UI 9.4.2), it could have changed in later versions, I know that dialog has been touched by developers since then.

/Steve

I can confirm it works in later versions of CMS 9