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