Custom Style Formats with multiple css classes wont work

Don't miss out Virtual Happy Hour this Friday (April 26).

Try our conversational search powered by Generative AI!

AI OnAI Off

Home / Forums / Legacy forums / Episerver 7 CMS /

Custom Style Formats with multiple css classes wont work

Jonas Boman

Vote:

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?!

Regards,

#85576

Apr 29, 2014 16:21

Vote:

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... */

#85699

May 02, 2014 11:27

Kim Medin

Vote:

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:

p.bold.red {
   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;
}

#150892

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.