Add save button in Blazor Document editor toolbar

4 Oct 20241 minute to read

To add a save button to the existing toolbar in DocumentEditorContainer

Blazor Word Processor component (a.k.a Document Editor) component allows you to add a new button to the existing items in a toolbar using CustomToolbarItemModel and with existing items in toolbarItems property. Newly added item click action can be defined in toolbarclick.

<SfDocumentEditorContainer @ref="container" EnableToolbar=true ToolbarItems="@Items">
    <DocumentEditorContainerEvents OnToolbarClick="ToolbarClick"></DocumentEditorContainerEvents> 
</SfDocumentEditorContainer> 
 
@code { 
    SfDocumentEditorContainer container; 
    List<Object> Items = new List<Object> { "New","Open", new CustomToolbarItemModel() { Id = "save", Text = "Save", PrefixIcon = "e-save icon", TooltipText = "Save the Document" }, "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" }; 

    private void ToolbarClick(ClickEventArgs args)
    {
        if (args.Item.Id == "save")
        {
            container.DocumentEditor.SaveAsync("sample", FormatType.Docx);
        }
    }
};

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' ].