SaaS CMS has officially launched! Learn more now.

uiEditorCssPaths and defining styles for table classes in table editor

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
Vote:
 

Hi

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
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
Vote:
 

Anyone found a solution to this?

#77426
Nov 19, 2013 8:49
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
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
Vote:
 

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

#77888
Nov 28, 2013 9:10
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
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
Vote:
 

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

#77925
Nov 28, 2013 13:44
Vote:
 

We have the same issue in the Advanced Insert Image dialog

Any news?

#109721
Oct 13, 2014 16:13
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.