Styles from TableLayoutCSSFile loading in "Select CSS Class" dropdown

[Nick]

We have had our RadEditor working with a custom editor CSS file for a while, and the "Select CSS Class" dropdown properly shows just the classes in that file. I've been asked to add a TableLayoutCSSFile to provide a custom table format. Once I add the table file to the config, the table styles begin showing in the class dropdown.

Is there any way to prevent this? We don't want users to have to scroll through tons of table styles, just to get to the content styles at the bottom of the list.

[Ianko]

Hello Nick,

You can reconfigure the items shown in the Apply Css Class tool via the CssClasses collection of the RadEditor. 

For example, lets say we have a CssFile file with the selector .VisibleClass and a TableLayoutCSSFile  file with the selector - .nonVisisbleClass.

TableLayoutCssFile.css

.nonVisibleClass {
}

FormattingStyles.css

.VisibleClass {
}

RadEditor config

<telerik:RadEditor runat="server" ID="RadEditor1" NewLineMode="P" TableLayoutCssFile="~/TableLayoutCssFile.css">
    <CssFiles>
        <telerik:EditorCssFile Value="~/FormattingStyles.css" />
    </CssFiles>
    <CssClasses>
        <telerik:EditorCssClass Name="Visible Class" Value=".VisibleClass" />
    </CssClasses>
</telerik:RadEditor>

Result - see attached screenshot


Regards,
Ianko
Telerik

 

 

[Nick]

Is this something that can be accomplished with the configfile.xml?

[Ianko]

Hello Nick,

Yes you can. A detail demonstration how to configure a ToolsFile xml file to define the classes is available in this help article.

Regards,
Ianko
Telerik