From f3d79eb65fa5ada0b7da91ca44a5508ca6ceba14 Mon Sep 17 00:00:00 2001 From: vinithaJeyakumar <vinitha.jeyakumar@syncfusion.com> Date: Thu, 10 Apr 2025 17:55:06 +0530 Subject: [PATCH] 951893: Added Undo Redo manager section for custom tool in RichTextEditor Blazor --- blazor/rich-text-editor/undo-redo-manager.md | 42 ++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/blazor/rich-text-editor/undo-redo-manager.md b/blazor/rich-text-editor/undo-redo-manager.md index 15e4761977..17fcf1b719 100644 --- a/blazor/rich-text-editor/undo-redo-manager.md +++ b/blazor/rich-text-editor/undo-redo-manager.md @@ -97,4 +97,46 @@ In the following code example, remove the undo and redo tools from the toolbar. {% endhighlight %} {% endtabs %} +## Undo Redo Manager with Custom Toolbar + +The Rich Text Editor allows you to configure custom tools in its toolbar, and any actions performed through these custom tools can be reverted or restored using the Undo/Redo manager by utilizing the [ExecuteCommandOption.Undo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ExecuteCommandOption.html#Syncfusion_Blazor_RichTextEditor_ExecuteCommandOption_Undo) + +{% tabs %} +{% highlight razor %} + +<SfRichTextEditor> + <RichTextEditorToolbarSettings Items="@Tools"> + <RichTextEditorCustomToolbarItems> + <RichTextEditorCustomToolbarItem Name="Insert HTML"> + <Template> + <SfButton Content="Insert HTML" @onclick="onClick"></SfButton> + </Template> + </RichTextEditorCustomToolbarItem> + </RichTextEditorCustomToolbarItems> + </RichTextEditorToolbarSettings> + <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p> +</SfRichTextEditor> + +@code { + SfRichTextEditor rteObj; + private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>() + { + new ToolbarItemModel() { Command = ToolbarCommand.Bold }, + new ToolbarItemModel() { Command = ToolbarCommand.Italic }, + new ToolbarItemModel() { Command = ToolbarCommand.Underline }, + new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough }, + new ToolbarItemModel() { Name = "Insert HTML", TooltipText = "Insert HTML" }, + }; + public async Task onClick() + { + ExecuteCommandOption executeCommandOption = new ExecuteCommandOption(); + executeCommandOption.Undo = true; + string value = "Inserted a text"; + await this.rteObj.ExecuteCommandAsync(CommandName.InsertHTML, value, executeCommandOption); + } +} + +{% endhighlight %} +{% endtabs %} + 