Skip to content

951893: Added Undo Redo manager section for custom tool in RichTextEditor Blazor #5811

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: development
Choose a base branch
from
Open

951893: Added Undo Redo manager section for custom tool in RichTextEditor Blazor #5811

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a4e868c
951893: Added Undo Redo manager section for custom tool in RichTextEd…
VinithaJeyakumar Apr 10, 2025
e06c2c4
Merge branch 'development' into 951893-undoBlazht
VinithaJeyakumar Apr 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions blazor/rich-text-editor/undo-redo-manager.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}

![Blazor RichTextEditor remove undo/redo tools](./images/blazor-richtexteditor-remove-undo-redo.png)