Undo redo in the Angular Rich Text Editor component

16 Jan 20252 minutes 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:

app.component.ts

import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarSettingsModel, ToolbarService, LinkService, ImageService, HtmlEditorService, CountService, QuickToolbarService, TableService, PasteCleanupService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [RichTextEditorModule],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='editor' [toolbarSettings]='tools' [undoRedoSteps] ='steps' [undoRedoTimer]='timer'>
               </ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, CountService, QuickToolbarService, TableService, PasteCleanupService]
})
export class AppComponent {
    public tools: ToolbarSettingsModel = { items: ['Undo', 'Redo'] };
    public steps: number= 50;
    public timer: number = 400;
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));