HTML Editor use compatible SSRS html tags

Radzen.Blazor Components
1

Is it possible to modify the HTML Editor or change the html tags it uses that are compatible with SSRS?

the SSRS compatible tags are here

This post is also similar to this forum post here

For example, for underline the HTML Editor would format underlined text as:

<p><span style="font-weight: normal; text-decoration-line: underline;">Here is some underlined text</span></p>

But to be SSRS compatible it would need to be more like this.

<p><u>Here is some underlined text</u></p>

Any tips or recommendations would be greatly appreciated.

2

Hi @drmozley,

You can try executing the following JavaScript after the RadzenHtmlEditor is initialized:

document.execCommand('styleWithCSS', false, false)

This will make the browser built-in editor use presentation tags instead of CSS (for example <b> for bold and <u> for underline).

3

Thank you for the quick reply. That JavaScript function does do the trick that I'm looking for. I'm a little concerned that it'll be depreciated, but it seems to still be used in browsers for now.

I've been testing to see when to call that JavaScript and I'm having trouble identifying the correct time to call that function. I've found that if I call it on a button click on the page it will work correctly. However, when I try to call it using the below Blazor methods it doesn't seem to work. "Clearcss" calls:

`document.execCommand('styleWithCSS', false, false)`

protected void OnAfterRender()
    {
        JsRuntime.InvokeVoidAsync("Clearcss");
    }

protected void OnInitialized()
    {
        JsRuntime.InvokeVoidAsync("Clearcss");
    }

I've also tried to calling it on EXECUTE. It does not take affect on the first try but it works on the subsequent tries. Which method should this call be used in to work effectively?

4

If this function gets removed RadzenHtmlEditor and a lot of other HTML editors will stop working. This is a risk we have to take :slight_smile:

The code needs to execute OnAfterRenderAsync of the RadzenHtmlEditor. This is where it initializes itself.

5

Good to know if it goes down we all go down :slight_smile:

I had tried OnAfterAsync as well. I pasted my code below. Maybe I have something wrong. when the first Render is called and I try the underline and it uses the css

<span style="text-decoration: underline;">Enter Text Here</span>

Then on Second Render it works properly (after I also clear out the previous html)

<u>Enter Text Here</u>

I'm guessing what is happening is the code below is running before the html editor renders.

protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender)
        {
            await JsRuntime.InvokeVoidAsync("Clearcss");
            Console.WriteLine("Does not work on first loop");
        }
        else
        {
            await JsRuntime.InvokeVoidAsync("Clearcss");
            Console.WriteLine("Works on second loop");
        }
    }
6

I'm interested if there is a better solution, but this seems to get the job done. Again thank you for you help it's very much appreciated. The first render calling StateHasChanged will trigger a second render which gets the job done. I then have a bool to ensure it's only run 1 more time.

bool secondRender = true;

    protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                await JsRuntime.InvokeVoidAsync("StyleWithCSS");
                StateHasChanged();
            }
            else
            {
                if (secondRender)
                {
                    await JsRuntime.InvokeVoidAsync("StyleWithCSS");
                    secondRender = false;
                }
            }
        }