Changing Texts in the FormatBlock Dropdown Header of RadEditor for ASP.NET AJAX

Environment

Product	RadEditor for ASP.NET AJAX
Version	2025.1.218

Description

I want to change the texts displayed in the FormatBlock dropdown of RadEditor for ASP.NET AJAX. By default, the dropdown shows values such as "Normal," "Heading 1," "Heading 2," and "Heading 3." I need these values to be displayed as "Normale," "H1," "H2," and "H3" instead.

This knowledge base article also answers the following questions:

• How to modify FormatBlock display values in RadEditor for ASP.NET AJAX?
• How to replace default text in RadEditor dropdowns?
• How to customize FormatBlock display values in RadEditor?

Solution

To achieve the desired customization, follow these steps:

1. Configure RadEditor

Use the following markup to define the Paragraphs and EditorDropDown for the FormatBlock tool.

html

<telerik:RadEditor ID="Radeditor1" runat="server" Skin="WebBlue" OnClientSelectionChange="OnClientSelectionChange">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorDropDown name="FormatBlock"/>
        </telerik:EditorToolGroup>
    </Tools>
    <Paragraphs>
        <telerik:EditorParagraph Title="Normale" Tag="<P>" />
        <telerik:EditorParagraph Title="H1" Tag="<H1>" />
        <telerik:EditorParagraph Title="H2" Tag="<H2>" />
        <telerik:EditorParagraph Title="H3" Tag="<H3>" />
    </Paragraphs>
</telerik:RadEditor>

2. Apply JavaScript Customization

Include the following JavaScript code to handle the OnClientSelectionChange event. This code replaces the default dropdown values with the desired ones.

javascript

<script type="text/javascript">
    function OnClientSelectionChange(editor, args) {
        var tool = editor.getToolByName("FormatBlock");
        if (tool) {
            setTimeout(function () {
                var value = tool.get_value();
                switch (value) {
                    case "Normal":
                        value = value.replace("Normal", "Normale");
                        break;
                    case "Heading 1":
                        value = value.replace("Heading 1", "H1");
                        break;
                    case "Heading 2":
                        value = value.replace("Heading 2", "H2");
                        break;
                    case "Heading 3":
                        value = value.replace("Heading 3", "H3");
                        break;
                    case "Heading 4":
                        value = value.replace("Heading 4", "H4");
                        break;
                }
                tool.set_value(value);
            }, 0);
        }
    }
</script>

Explanation

• The OnClientSelectionChange event is triggered whenever a selection is made in the FormatBlock dropdown.
• The getToolByName function retrieves the FormatBlock tool.
• The setTimeout ensures the changes are applied after the dropdown value is updated.
• A switch statement replaces the default dropdown values with the customized ones.

See Also

• RadEditor Documentation
• Change Pixel to Point Size in RadEditor Forum Discussion