How to configure CSS classes for the image editor

Vote:
 

Is there a way to specify a separate set of say 2 CSS classes that should be available in the image editor?

The TinyMCE editor is working just fine and displays styles that I've named using

the special EditMenuName: property.

I've configured my

 uiEditorCssPaths="~/Static/css/editor.css" 

At the moment it seems that all classes from my editor.css plus some additional epi-classes gets added.

The classes that I've decorated with EditMenuName: is listed as the class name and not the EditMenuName:"My special style" etc.

Image editor

#113378
Nov 19, 2014 13:40
Vote:
 

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/

#113431
Nov 20, 2014 10:57
Vote:
 

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;"
#113459
Nov 21, 2014 9:49
Vote:
 

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

#113460
Nov 21, 2014 9:57
Vote:
 

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

#117882
Feb 23, 2015 15:34
Vote:
 

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
    {

    }
#117887
Feb 23, 2015 16:25
Vote:
 

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?

#121983
May 22, 2015 16:17
Dan
Vote:
 

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 ?

#140769
Oct 29, 2015 16:16
Vote:
 

Me three!

#143678
Jan 28, 2016 18:14
Vote:
 

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

#143682
Jan 28, 2016 19:24
Vote:
 

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.

#171737
Nov 16, 2016 22:17
Vote:
 

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

#171738
Nov 16, 2016 22:44
Vote:
 

I can confirm it works in later versions of CMS 9

#171773
Nov 17, 2016 14:08
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.