[Solved] Apply CSS Styles display names instead of classes

[Koen Klomp]

Hi,

I add the classes to the Apply CSS Styles through code.

RadEditor1.CssClasses.Clear();
RadEditor1.CssClasses.Add("Human Readable Class 1", ".style2345");
RadEditor1.CssClasses.Add("Human Readable Class 2", ".style2346");
RadEditor1.CssClasses.Add("Human Readable Class 3", ".style2347");
RadEditor1.CssClasses.Add("Human Readable Class 4", ".style2348");

the .style classes are defined in a <style> block in the head section of the side.

When the Editor is loaded and I click on the dropdown it shows a list with nice human readable classnames.
When I select one of them the dropdownlist shows the classname which in my case isn't very user friendly.

Is there a way to show the nice names instead of the classnames?

Regards,
Roel

[Dobromir]

Hi Koen,

In order to achieve the requested behavior you need to replace  the tool value (currently css selector) with the name of the respective class. The following sample code should perform this:

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientSelectionChange="OnClientSelectionChange">
    <CssClasses>
        <telerik:EditorCssClass Name="Human Readable Class 1" Value=".style2345" />
        <telerik:EditorCssClass Name="Human Readable Class 2" Value=".style2346" />
        <telerik:EditorCssClass Name="Human Readable Class 3" Value=".style2347" />
        <telerik:EditorCssClass Name="Human Readable Class 4" Value=".style2348" />
    </CssClasses>
    <Content>
        <img alt="" width="200" height="200" />asasdfas<span class="style2345">dfasdfasd</span>fasdf
    </Content>
</telerik:RadEditor>
<script type="text/javascript">
    function OnClientSelectionChange(editor, args) {
        var tool = editor.getToolByName('ApplyClass');
        if (tool) {
            setTimeout(function() {
                var cssClasses = editor.get_cssClasses();//get editor classes collection
                for (var i = 0; i < cssClasses.length; i++) {
                    var cssClass = cssClasses[i];
                    var toolValue = tool.get_value();
                    //cssClasses collection contains declared classes in the following template [0] css selector name [1] defined class name
                    if (cssClass[0].substring(1) == toolValue) {
                        tool.set_value(cssClass[1]);
                        break;
                    }
                }
            }, 0);
        }
    }
</script>

Kind regards,
Dobromir
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.