We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How do you emit CSS framework-specific classes?

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.

1 Reply

VJ Vinitha Jeyakumar Syncfusion Team March 8, 2023 03:22 PM UTC

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>
    public async Task OnActionComplete(ActionCompleteEventArgs args)
        if(args.RequestType == "JustifyCenter")
             await jsRuntime.InvokeAsync<object>("accessDOMElement");
function accessDOMElement() {
            document.getElementsByClassName("e-rte-image e-imgcenter")[0].classList.add("mx-auto.d-block");


Attachment: RTE_Server_f371fa41.zip

Live Chat Icon For mobile
Up arrow icon