editor-apply-a-predefined-css-class-to-a-block-element.md

title	description	type	page_title	slug	position	tags	ticketid	res_type
How to apply a predefined CSS class to a block element in the content area?	The code solution shows how to customize the ApplyClass tool of RadEditor for ASP.NET AJAX and apply the selected CSS class to the selected block element in its content area.	how-to	Apply a predefined CSS class to a block element in the content	editor-apply-a-predefined-css-class-to-a-block-element			1534913	kb

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>