Try our conversational search powered by Generative AI!

Custom Style Formats with multiple css classes wont work


I'm doing some customizations to the texteditor and have successfully added my a(the template plugin for TinyMce, which inserts snippets of html code into the editor.

Extending this I would like to use custom style formats which is implemented via Editor.css. This works - kind of.
Bot not in those cases I would like to use multiple classes to an element

a.btn.btn-link {
    EditMenuName: Big blue link button;


In this case, only the first css class is set to the dropdown.

[EditorDescriptorRegistration(TargetType = typeof(XhtmlString), EditorDescriptorBehavior = EditorDescriptorBehavior.PlaceLast)]
    public class XhtmlStringEditorDescriptor : EditorDescriptor
        public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
            var settings = (IDictionary<string, object>)metadata.EditorConfiguration["settings"];
            var styleFormats = (IEnumerable<object>)settings["style_formats"];
            var classes = new List<string>();

            foreach (var styleFormat in styleFormats)
                var type = styleFormat.GetType();
                var propValue = type.GetProperty("classes");
                var propKey = type.GetProperty("title");

                if (propValue != null)
                    classes.Add(String.Format("{0}={1}", propKey.GetValue(styleFormat, null), propValue.GetValue(styleFormat, null)));

            settings["theme_advanced_styles"] = String.Join(";", classes);


When debugging it is clear that "styleFormats" does not incorperate the second class.

Are there any suggestions or workarounds for this issue?!





Apr 29, 2014 16:21

We just stuck with ugly and one class for rules we add EditMenuName to.

table.w300-left {
	EditMenuName: 300px left;
table.w300-right {
	EditMenuName: 300px right;
} /* etc... */


May 02, 2014 11:27

Old post but I was struggling with the same problem. After digging in the different DLLs, finally finding the TinyMCEStyleFormatterHelper (in EPiServer.Editor.TinyMCE) I noticed that episerer does try to resolve multiple classes, just not in the correct CSS way.

The result you are after:

<p class="bold red">I am a bold red paragraph</p>

To style that using CSS: {
   color: red;
   font-weight: bold;

To generate that 'Bold red paragraph' item in the styles list, all you need to do is to separate your classes with a space in your editor.css. Unlogical but simple.

p.bold .red {
   EditMenuName: Bold red paragraph;
Jul 01, 2016 11:24
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
* 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.