How do you emit CSS framework-specific classes?

[Jeff Adkisson]

When I center an image in the RTE, it adds this class:

class="e-rte-image e-imgcenter e-imginline"

Our end-user platform renders content with Bootstrap 5. The equivalent class is:

class="mx-auto d-block"

I tried using the BS5 theme and it still adds the e- classes. How can I add the class(es) our platform requires when a formatting content in the Blazor RTE? I cannot deploy the editor's classes in our platform.

Thank you.



[Vinitha Jeyakumar]

Hi Jeff,

We would like to inform you that we cannot remove the class name "e-rte-image e-imgcenter e-imginline" from the image inserted into the RichTextEditor. but you can add your own custom classes to the image while justifying center the image using the OnActionComplete event and JsInterop like below,

Code snippet:

@using Syncfusion.Blazor.RichTextEditor

@inject IJSRuntime jsRuntime;

<SfRichTextEditor Height="300px">

    <RichTextEditorEvents OnActionComplete="OnActionComplete"></RichTextEditorEvents>

</SfRichTextEditor>

@code{

    public async Task OnActionComplete(ActionCompleteEventArgs args)

    {

        if(args.RequestType == "JustifyCenter")

        {

             await jsRuntime.InvokeAsync<object>("accessDOMElement");

        }

    }

}

Layout.cshtml

function accessDOMElement() {

           

            document.getElementsByClassName("e-rte-image e-imgcenter")[0].classList.add("mx-auto.d-block");

                       

        }

Regards,

Vinitha

Attachment: RTE_Server_f371fa41.zip