New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

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


Product Version all
Product RadEditor for ASP.NET AJAX


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.


Here is the code:

<telerik:RadEditor runat="server" ID="RadEditor1" OnClientCommandExecuting="OnClientCommandExecuting">
        <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>
    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":
                        element.className = selectedClassName;
In this article