Undo redo in the ASP.NET MVC Rich Text Editor Control

4 Mar 20251 minute to read

The Undo and Redo features in the Rich Text Editor allowing you to reverse or restore recent changes, providing a safety net for text edits and enhancing the overall editing experience.

There are two ways to perform Undo and Redo operations:

  1. Click the Undo or Redo buttons on the toolbar.
  2. Use keyboard shortcuts:
    • For Undo: Ctrl + Z (Windows) or Cmd + Z (Mac)
    • For Redo: Ctrl + Y (Windows) or Cmd + Shift + Z (Mac)

Customizing Undo/Redo Timer

By default, the time interval for storing Undo/Redo actions is 300 milliseconds. You can adjust this interval using the UndoRedoTimer property.

Configuring Undo/Redo Steps

The editor allows up to 30 Undo/Redo actions by default. You can modify the number of undo/redo steps using the UndoRedoSteps property.

Here’s an example of how to customize both the Undo/Redo timer and steps:

@Html.EJS().RichTextEditor("undo-redo").ToolbarSettings(e => e.Items((object)ViewBag.items)).UndoRedoSteps(40).UndoRedoTimer(400).Value(ViewBag.value).Render()
public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.items = new[] {  "Undo", "Redo" };
        ViewBag.value = @"<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
        return View();
    }
}