menu

Blazor

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class RichTextEditorCustomToolbarItem - Blazor API Reference | Syncfusion

    Show / Hide Table of Contents

    Class RichTextEditorCustomToolbarItem

    A class used for configuring the custom toolbar item properties in the SfRichTextEditor. This allows the addition of user-defined tools within the editor's toolbar.

    Inheritance
    System.Object
    RichTextEditorCustomToolbarItem
    Namespace: Syncfusion.Blazor.RichTextEditor
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public class RichTextEditorCustomToolbarItem : OwningComponentBase
    Examples

    In the following example, insert the horizontal line using the custom tool option.

    @using Syncfusion.Blazor.RichTextEditor;
    <SfRichTextEditor @ref="RTEInstance">
        <RichTextEditorToolbarSettings Items="@Tools">
            <RichTextEditorCustomToolbarItems>
                <RichTextEditorCustomToolbarItem Name="Symbol">
                     <Template>
                        <button class="e-btn e-tbar-btn" @onclick="ClickHandler">
                             <div class="e-tbar-btn-text" style="font-weight: 500;">__</div>
                        </button>
                     </Template>
                </RichTextEditorCustomToolbarItem>
            </RichTextEditorCustomToolbarItems>
        </RichTextEditorToolbarSettings>
    </SfRichTextEditor>
    @code {
        SfRichTextEditor RTEInstance;
        private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
        {
            new ToolbarItemModel() { Name = "Symbol", TooltipText = "Insert horizontal line" }
        };
        private async Task ClickHandler() {
            await this.RTEInstance.ExecuteCommandAsync(CommandName.InsertHTML, "<hr>");
        };
    }

    Constructors

    RichTextEditorCustomToolbarItem()

    Declaration
    public RichTextEditorCustomToolbarItem()

    Properties

    Name

    Gets or sets the custom tool name. This property is used to define the custom tool's identifier within the toolbar.

    Declaration
    public string Name { get; set; }
    Property Value
    Type Description
    System.String

    Accepts a string value representing the name of the custom tool. The default value is String.Empty.

    Remarks

    This name serves as the identifier for the custom toolbar item. Users should provide a unique and descriptive name.

    Template

    Gets or sets the template to customize the toolbar item. This allows users to define their own HTML structure for the toolbar item.

    Declaration
    public RenderFragment Template { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.RenderFragment

    A Microsoft.AspNetCore.Components.RenderFragment that defines the template content. The default value is null.

    Remarks

    The template provides customization flexibility for designing the toolbar item according to specific requirements.

    Methods

    Dispose(Boolean)

    Dispose unmanaged resources in the Syncfusion Blazor component.

    Declaration
    protected override void Dispose(bool disposing)
    Parameters
    Type Name Description
    System.Boolean disposing

    Boolean value to dispose the object.

    OnInitializedAsync()

    Method invoked when the component is ready to start.

    Declaration
    protected override Task OnInitializedAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task

    A System.Threading.Tasks.Task representing any asynchronous operation.

    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved