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

2 Answers 37 Views
Editor
miksh
Top achievements
Rank 1
Iron
miksh asked on 09 Sep 2021, 08:51 PM

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?

 

2 Answers, 1 is accepted

Sort by
0
Accepted
miksh
Top achievements
Rank 1
Iron
answered on 17 Sep 2021, 02:31 PM

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
Telerik team
commented on 22 Sep 2021, 12:10 PM

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
Top achievements
Rank 1
Iron
commented on 22 Sep 2021, 12:52 PM

I see, thanks, it works.
Vessy
Telerik team
commented on 22 Sep 2021, 01:05 PM

You are welcome :)
0
Rumen
Telerik team
answered on 14 Sep 2021, 09:07 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Editor
Asked by
miksh
Top achievements
Rank 1
Iron
Answers by
miksh
Top achievements
Rank 1
Iron
Rumen
Telerik team
Share this question
or