How to Customize Toolbar in Blazor DOCX Editor

14 Aug 20262 minutes to read

Customize the existing toolbar in the Document Editor Container

The Blazor DOCX Editor (Document Editor) component allows you to customize (add, show, hide, enable, and disable) existing items in a toolbar.

  • Add - New items can be defined by the CustomToolbarItemModel and with existing items in the ToolbarItems property. The click action for newly added items can be defined in the OnToolbarClick event.
  • Show, Hide - Existing items can be shown or hidden using the ToolbarItems property. Pre-defined toolbar items are available with the ToolbarItem.
  • Enable, Disable - Toolbar items can be enabled or disabled using the EnableItemAsync.
<SfDocumentEditorContainer @ref="container" EnableToolbar=true ToolbarItems="@Items">
</SfDocumentEditorContainer>

@code {
    SfDocumentEditorContainer container;
    string[] Items = new string[4] { "New", "Undo", "Redo", "Comments" };
}

How to add a new custom toolbar item in the Document Editor Container

The following code example illustrates how to add a new custom toolbar item in the Document Editor Container.

<SfDocumentEditorContainer @ref="container" EnableToolbar=true ToolbarItems="@Items">
</SfDocumentEditorContainer>

@code {
    SfDocumentEditorContainer container;
    List<Object> Items = new List<Object> { new CustomToolbarItemModel() { Id = "save", Text = "Save" }, "New", "Undo", "Redo", "Separator", "Image", "Table", "Hyperlink", "Bookmark", "TableOfContents", "Separator", "Header", "Footer", "PageSetup", "PageNumber", "Break", "InsertFootnote", "InsertEndnote", "Separator", "Find", "Separator", "Comments", "TrackChanges", "Separator", "LocalClipboard", "RestrictEditing", "Separator", "FormFields", "UpdateFields" };
}

NOTE

The default value of ToolbarItems is ['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields'].

Online Demo

Explore how to customize the toolbar in the Blazor Document Editor for working with Word documents in this live demo here.