Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 20 Apr 2022 18:41 by ADMIN
Release 3.3.0
Eli
Created on: 28 Jul 2021 09:28
Category: Editor
Type: Bug Report
5
Editor adds two <tbody> tags

When you paste a table in the Editor or insert one through the InsertHTML tool, the Editor adds two  <tbody> tags making this invalid HTML.

If you include a table in the initially rendered content (not pasting it afterwards), two <tbody> tags appear as well.

If you create table using the Create Table tool this behavior is not present, only one <tbody> tag is added as expected.

1 comment
ADMIN
Dimo
Posted on: 26 Nov 2021 12:58

Hello all,

Here is a workaround that you can use until the bug is fixed:

  • Use one-way binding for the Editor value and ValueChanged
  • Remove extra tbody tags:
    • with JavaScript when the value changes in the browser
    • with server code before storing the HTML in the database or before setting it as an Editor value 
    • adjust the EditorTBodyFixes dictionary to suit your needs
  • The timeout in the JS code ensures the Editor value has been rendered. You can reduce it or remove it, depending on your scenario.

Razor

@using Telerik.Blazor.Components.Editor
@inject IJSRuntime jsRuntime

<TelerikEditor Tools="@EditorToolSets.All"
               Height="300px" Id="editor1"
               Value="@Value" ValueChanged="@StripTBODY"></TelerikEditor>

@code {
    public string Value = @"<table class=""k-table""><tbody><tr><td><p><br></p></td></tr></tbody></table>";

    async Task StripTBODY(string newValue)
    {
        var processedValue = newValue;

        foreach (var fix in EditorTBodyFixes)
        {
            processedValue = processedValue.Replace(fix.Key, fix.Value);
        }

        Value = processedValue;

        if (processedValue != newValue)
        {
            await jsRuntime.InvokeAsync<string>("removetbody", "editor1");
        }
    }

    Dictionary<string, string> EditorTBodyFixes = new Dictionary<string, string>() {
        { "<tbody><tbody>", "<tbody>" },
        { "</tbody></tbody>", "</tbody>" },
        { "<tbody><tr></tr></tbody>", "" }
    };

    protected override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            jsRuntime.InvokeAsync<string>("removetbody", "editor1");
        }
        return base.OnAfterRenderAsync(firstRender);
    }
}

JavaScript

window.removetbody = (id) => {
    window.setTimeout(function () {
        var iframe = document.querySelector("#" + id + " iframe");
        if (iframe) {
            var tbodies = iframe.contentWindow.document.querySelectorAll("table > tbody > tbody");
            if (tbodies.length > 0) {
                tbodies.forEach(function (tbodyElement) {
                    tbodyElement.parentElement.innerHTML = tbodyElement.innerHTML;
                });
            }
        }
    }, 1000);
}

Regards,
Dimo
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
Category