uiEditorCssPaths and defining styles for table classes in table e

uiEditorCssPaths and defining styles for table classes in table editor

Simen Overgaard Øvergaard

Vote:

Greetings :)

I am having some trouble removing episerver css classes from parts of tinymce in cms 7 and was wondering if anyone had come across similar issues or had some ideas on how to solve it.

I am attempting to replace the standard styles in the dropdown meny in the table editor of tinymce in EPiServer 7.

After cleaning my Editor.css class of all old styles, epi_dc_preview, epi_pc_content etc. and adding new custom styles the old styles are still present in the drop down list for the table editor but gone from the general "styles" drop down as expected.

If I add more custom table classes they are appended at the bottom below all the "epi_" generated list of classes. This is whlie using the editor in episerver 7 dojo edit mode.

The path to my custom Editor.css file is configured both under <sitesettings> and in the global tiny mce settings.

If I try to edit the page accessing it in the "old ui" "/cms/edit/" the drop down list under table settings just lists the class I created and not all the other epi classes so here it works as one would expect. The "dojo" tinymce editor get loaded from my AppData folder while the "old ui" gets loaded from "Program Files/Episerver/etc".

#76138

Oct 17, 2013 16:26

Per Nergård

Vote:

We have the same issue. We have custom editor.css with custom styles and in CMS 7.0 it worked and only displayed our own styles. Somewhere along the way with the patches of CMS7 I think something got changed. Now we get a lot of EPi styles and our custom ones are added to the bottom of the list.

#76139

Oct 17, 2013 16:53

liam.richardson

Vote:

Having the same issue here as well. Can't figure out how to add my own custom classes into the table dropdown for the life of me.

#76236

Oct 21, 2013 16:25

Per Nergård

Vote:

Anyone found a solution to this?

#77426

Nov 19, 2013 8:49

Erik Kärrsgård

Vote:

Hi,

The change in behavior is likely because of an TinyMCE upgrade. It seems that if the configuration does not contain any entries in the "style_formats" property it will list all css-classes it can find in the content to be edited.

To solve this, use the mapping attributes EditMenuName and EditMenuTitle in your editors css-file to populate the property:

h2 {
EditMenuName: header2;
}

h3 {
EditMenuName: header3;
}

Then you can also give the options a nicer name by adding them to the language file:

<languages>
<language name="English" id="en">
<editorstyleoptions>
<heading2>Heading 2</heading2>
<heading3>Heading 3</heading3>
</editorstyleoptions>
</language>
<languages>

#77605

Nov 21, 2013 14:13

Johan Petersson

Vote:

Hi Erik,

We have EditMenuName in our CSS. All classes are shown in the dropdown in the insert image dialog, BUT all EPiServer classes as well. The regular global style dropdown shows correct classes though.

Is there a way to hide all EPiServer classes in the image dialog?

#77880

Nov 28, 2013 2:46

Per Nergård

Vote:

I have an open support case for this but haven't got any solution.

#77888

Nov 28, 2013 9:10

Erik Kärrsgård

Vote:

Hi,

A little debugging of the image dialog revealed that it wants it's classes served in a different configuration property. Solving that is possible albeit not pretty with something like this:

    [EditorDescriptorRegistration(TargetType = typeof(XhtmlString), EditorDescriptorBehavior = EditorDescriptorBehavior.PlaceLast)]
    public class XhtmlStringEditorDescriptor2 : 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);
        }
    }

#77921

Nov 28, 2013 12:45

Per Nergård

Vote:

Erik: We are getting defined classes aswell as alot of builtin for the Xhtml table editor classes dropdow. Will youre solution work for that aswell?

#77922

Edited, Nov 28, 2013 12:48

Erik Kärrsgård

Vote:

Yes, it should do the trick in that case as well.

#77925

Nov 28, 2013 13:44

Martin Betz

Vote:

We have the same issue in the Advanced Insert Image dialog

Any news?

#109721

Oct 13, 2014 16:13