Customize existing toolbar in Blazor DocumentEditor Component
17 Feb 20221 minute to read
How to customize existing toolbar in DocumentEditorContainer
Blazor Word Processor
component (a.k.a Document Editor) component allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar.
-
Add - New items can defined by
CustomToolbarItemModel
and with existing items intoolbarItems
property. Newly added item click action can be defined intoolbarclick
. -
Show, Hide - Existing items can be shown or hidden using the
toolbarItems
property. Pre-defined toolbar items are available withToolbarItem
. -
Enable, Disable - Toolbar items can be enabled or disable using
EnableItemAsync
<SfDocumentEditorContainer @ref="container" EnableToolbar=true ToolbarItems="@Items">
</SfDocumentEditorContainer>
@code {
SfDocumentEditorContainer container;
string[] Items = new string[4] { "New", "Undo", "Redo", "Comments"};
}
Note: Default value of
ToolbarItems
are['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']
.