How to apply pre-defined css class to <p> in editor?

[miksh]

When apply pre-defined css class (from class dropdown) to <p> in editor it wraps the paragraph text with  <span> and applies class to <span>

E.g. on your demo page Telerik Web UI Editor Overview Demo | Telerik UI for ASP.NET AJAX after apply .red-text to the first paragraph it resulted in 

<p><span class="redText"><strong>Barcelona </strong>is an excellent place to discover world-class arts and culture. The sights in Barcelona are second to none. Don&rsquo;t miss the architectural wonder, <a href="http://demos.telerik.com/aspnet-ajax/imagegallery/DestinationDetails?Id=1"><em>Casa Mila</em></a> - otherwise known as La Pedrera. You&rsquo;ll want to see another one of Antoni Gaudi&rsquo;s architectural masterpieces, <a href="http://demos.telerik.com/aspnet-ajax/imagegallery/DestinationDetails?Id=1"><em>Casa Batllo</em></a>, which is located at the center of Barcelona.</span>  </p>

How to apply that class to <p> using toolbar and not switching to html mode?

 

[miksh]

Thanks Rumen. I tried an approach with OnClientCommandExecuting and indeed in selects <p> but still inserts <span> and applies class to it.

Similar, i tried to apply class to <ul> using

                    case "LI":
                        editor.selectElement($(element).closest('ul')[0]);
                        break;

It selects <ul> but applies class to each <li>. 

Any suggestions?

[Vessy]

Hi miksh,

You can try applying the selected CSS class directly to the selectedElement of the Editor, as it will return the whole UL properly:

                                case "LI":
                                    editor.selectElement($(element).closest('ul')[0]);
                                    editor.getSelectedElement().className = selectedClassName;
                                    break;

[miksh]

I see, thanks, it works.

[Vessy]

You are welcome :)

[Rumen]

Hi Michael,

You can easily apply CSS classes to block elements like <p> and heading tags using the FormatBlock tool of RadEditor. Please, see the following live demo for more information: Paragraph Styles.

Another approach is to customize the ApplyClass command using the OnClientCommandExecuting client-side event which will allow you to check the selected element and apply the class name directly to it or its parent element, e.g.

 <telerik:RadEditor runat="server" ID="RadEditor1" OnClientCommandExecuting="OnClientCommandExecuting">

</telerik:RadEditor>
<script>
function OnClientCommandExecuting(editor, args)
        {
            var commandName = args.get_commandName();
            if (commandName == "ApplyClass")
            {
                var element = editor.getSelectedElement();
                alert(editor.getSelectionHtml());
                alert(element.innerHTML);
                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);
                            break;
                    }
                }
            }
        }
</script>

Regards,
Rumen
Progress Telerik