Last Updated: 21 Nov 2022 14:46 by ADMIN
Created on: 18 Nov 2022 20:37
Category: Editor
Type: Bug Report
ApplyClass wrap the selected image within a span tag instead of applying the class to the img itselft
In earlier versions of the editor, the css class was applied to the image tag itself, which is the correct way to do it. Otherwise the applied css class has no effect on the image.
1 comment
Posted on: 21 Nov 2022 14:46

Hi Göran,

I investigated the case in detail and found out that this was an intentional change in 2013. 

After a survey and interviews with customers, it appeared that we have to modernize the editor inline commands and the reported behavior was one of them. Let me explain how the ApplyClass command works as of Q2 2013 till now:

  • Scenario 1: if the class name contains the tag name

    img.imageRedText {
                color: red;

    , then ApplyClass will apply it directly to the selected tag:

    <img alt="" src="/aspnet-ajax/Editor/images/UserDir/Marketing/Tokyo.png" class="blueBorder" />

  • Scenario 2: if the class name does not contain the tag name 

            .commonBorder {
                border: 1px solid blue;

    then the selection will be wrapped in a span tag with the selected CSS class:

    <span class="redText"><img alt="" src="/aspnet-ajax/Editor/images/UserDir/Marketing/Tokyo.png" /></span>

    As I explained this change is intentional and enabled after validation with many customers and we do not plan to alter it since it will be a huge breaking change in the behavior of the command. If you still want the old behavior, you can either:

    • enable back the legacy commands of RadEditor via the following script tags:

      <asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>
      <script type="text/javascript" src='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadEditor), "Telerik.Web.UI.Editor.RadEditor.Commands.LegacyCommands.js") %>'></script>
      <script type="text/javascript" src="<%= Page.ClientScript.GetWebResourceUrl(typeof(RadEditor), "Telerik.Web.UI.Editor.RadEditor.Commands.LegacyInlineCommands.js") %>"></script>

    • customize the ApplyClass command. Let me know if you wish to send you the solution.


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.