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

Process to recreate

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:

Prior Authorization

inner html element

Interceptor

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.

Prior Authorization 

inner html element

 Interceptor

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/.

Create an account Log In

View

Type

Status