Completed
Last Updated: 18 Jun 2021 18:11 by ADMIN
Seth
Created on: 18 Jun 2021 13:56
Category: Editor
Type: Bug Report
0
bug

Rich Text Editor: Un-bolding html elements inside a bolded parent element creates extra html elements.

 

Process to recreate

  1. Add html element inside a bolded html element (via snippet or in html tab), then un-bold inner html element only.

Example html element inside a bolded html element:

<p>

<strong>

Prior Authorization

<span>inner html element</span>

Interceptor

</strong>

</p>

 

  1. Then un-bold the inner html element on the Design Tab.

 

Result

 

The resulting html in the html tab has extra html elements in both sections of surrounding still-bolded text.

 

 

<p>

<strong>Prior Authorization <span></span></strong>

<span>inner html element</span>

<strong><span></span> Interceptor</strong>

</p>

1 comment
ADMIN
Rumen
Posted on: 18 Jun 2021 18:11

Hi Seth,

I would suggest two approaches to resolve this unwanted behavior:

1) Override the Bold command and use the browser's one:

<telerik:RadEditor RenderMode="Lightweight" Skin="Silk" runat="server" Height="1000px" ID="RadEditor1" Width="800px" OnClientCommandExecuting="OnClientCommandExecuting">
    <Content>

        <p>

        <strong>

        Prior Authorization

        <span>inner html element</span>

        Interceptor

        </strong>

        </p>
    </Content>
</telerik:RadEditor>
<script type="text/javascript">
    function OnClientCommandExecuting(editor, args) {
        if (args.get_commandName() == "Bold") {
            editor.get_document().execCommand("Bold", null, false);
            args.set_cancel(true);
        }
    }
</script>

2) or use the legacy Bold command of RadEditor which you can activate with this script:

        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<script type="text/javascript" src="<%= Page.ClientScript.GetWebResourceUrl(typeof(RadEditor), "Telerik.Web.UI.Editor.RadEditor.Commands.LegacyInlineCommands.js") %>"></script>
  
<telerik:RadEditor RenderMode="Lightweight" Skin="Silk" runat="server" Height="1000px" ID="RadEditor1" Width="800px" >
    <Content>

        <p>

        <strong>

        Prior Authorization

        <span>inner html element</span>

        Interceptor

        </strong>

        </p>
            </Content>
</telerik:RadEditor>

You can find more information at Inline and Block Commands Behavior Change.

Best Regards,
Rumen
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.