1. Home
  2. Forum
  3. Blazor
  4. Is it possible to override B, I, U tags inline styles as html tags instead?

Is it possible to override B, I, U tags inline styles as html tags instead?

As the title says. Currently when using an underline it adds "style="text-decoation:underline" to the span. 

Can this be overriden or changed to instead change the tag to a <u></u>? 


Or can a custom class be added instead of style? 


Cheers in advance


3 Replies
BS Buvana Sathasivam Syncfusion Team February 22, 2022 02:28 PM UTC

Hi Piers, 

Greetings from Syncfusion support. 

You can achieve your requirement using the ActionComplete event. In the below sample, we have added a custom class name to the span element when we click the underline button. Please find the below sample and code for your reference. 

Index.razor 
<SfRichTextEditor @ref="rteObj"> 
 <RichTextEditorEvents OnActionComplete="@OnActionComplete"></RichTextEditorEvents> 
……… 
</SfRichTextEditor> 
 
<style> 
    .e-custom-class { 
        background-color: red; 
    } 
</style> 
@code { 
    [Inject] 
    IJSRuntime JsRuntime { get; set; } 
    public async Task OnActionComplete(ActionCompleteEventArgs args) 
    { 
        if (args.RequestType == "Underline") 
        { 
            await JsRuntime.InvokeVoidAsync("RichTextEditor.addCustomClass"); 
        } 
    } 
} 

jsinterop.js 
window.RichTextEditor = { 
    addCustomClass: function () { 
        if (window.getSelection().anchorNode.parentElement.style.textDecoration == "underline") { 
            window.getSelection().anchorNode.parentElement.style.textDecoration = ""; 
            window.getSelection().anchorNode.parentElement.classList.add("e-custom-class"); 
        } 
    } 
} 




Please let us know if you have any concerns. 

Regards, 
Buvana S 


PS Piers Spencer Courtney February 22, 2022 10:05 PM UTC

How would this handle toggling the style off? As its the same event argument.


Toggling the underline off or on is the same event: "underline" 


BS Buvana Sathasivam Syncfusion Team February 23, 2022 03:02 PM UTC

Hi Piers, 

You can achieve your requirement "ul tag included when clicking the toolbar icon with toggle on or off formats" by using the document execCommand method instead of adding a custom class. In the below sample, we created a custom toolbar icon and inserted an ul tag with toggle formats when clicking the custom buttons. Please find the below code for your reference. 

Index.razor 
<SfRichTextEditor @ref="rteObj"> 
            ………….. 
   <RichTextEditorToolbarSettings Items="@Tools"> 
                 <RichTextEditorCustomToolbarItems> 
                    <RichTextEditorCustomToolbarItem Name="Symbol"> 
                        <Template> 
                            <button class="e-btn e-tbar-btn" @onclick="ClickHandler"> 
                                <span class="e-underline e-icons e-btn-icon" style="font-weight: 500;"></span> 
                            </button> 
                        </Template> 
                    </RichTextEditorCustomToolbarItem> 
                </RichTextEditorCustomToolbarItems> 
                </RichTextEditorToolbarSettings> 
            </SfRichTextEditor> 
 
@code { 
    [Inject] 
    IJSRuntime JsRuntime { get; set; } 
    SfRichTextEditor rteObj; 
    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>() 
    { 
        new ToolbarItemModel() { Command = ToolbarCommand.Bold }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Italic }, 
        new ToolbarItemModel() { Name = "Symbol", TooltipText = "Insert Underline" },……………… 
   }; 
    private async Task ClickHandler() 
    { 
        await JsRuntime.InvokeVoidAsync("RichTextEditor.executeCommand"); 
    } 
} 

Jsinterop.js 
window.RichTextEditor = { 
    executeCommand: function () { 
        document.execCommand("underline", false, ""); 
    } 
} 



Regards, 
Buvana S 


Loader.
Up arrow icon