How to apply a predefined CSS class to a block element in the content area?

Environment

Product Version	all
Product	RadEditor for ASP.NET AJAX

Description

The code solution shows how to customize the ApplyClass tool of RadEditor for ASP.NET AJAX and apply the chosen CSS class from the dropdown to the selected block element in the content area without wrapping the selection in a tag.

Solution

Here is the code:

<telerik:RadEditor runat="server" ID="RadEditor1" OnClientCommandExecuting="OnClientCommandExecuting">
    <Content>
        <p>para 1 with some text</p>
        <p>para 2 with some text</p>
        <span>span 3 with some text</span>
        <div>div 2 with some text</div>
    </Content>
</telerik:RadEditor>
<script>
    function OnClientCommandExecuting(editor, args) {
        var commandName = args.get_commandName();
        if (commandName == "ApplyClass") {
            var element = editor.getSelectedElement();
            var selectedClassName = args.get_value()

            if (element && !Telerik.Web.UI.Editor.Utils.isEditorContentArea(element)) {
                var tagName = element.tagName;
                switch (tagName) {
                    case "P":
                    case "DIV":
                    case "FONT":
                    case "SPAN":
                        editor.selectElement(element);
                        element.className = selectedClassName;
                        break;
                }
            }
        }
    }
</script>