Undo and Redo in Angular Rich Text Editor Component
22 Aug 20254 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:
-
Toolbar: Click the
Undo
orRedo
buttons in the toolbar. -
Keyboard Shortcuts:
-
Undo:
Ctrl + Z
(Windows) orCmd + Z
(Mac) -
Redo:
Ctrl + Y
(Windows) orCmd + Shift + Z
(Mac)
-
Undo:
Configuring 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 undoRedoSteps property defines the maximum number of Undo/Redo actions stored, allows up to 30.
Here’s an example of how to customize both the Undo/Redo timer and steps:
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;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Clearing the Undo/Redo stack
The Rich Text Editor automatically maintains an undo/redo stack, allowing users to revert or redo changes made during editing.
To clear the entire undo and redo stack, use the public clearUndoRedo method. This is helpful when loading new content dynamically or resetting the editor to its initial state.
The following example demonstrates clearing the stack:
import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, HtmlEditorService, QuickToolbarService, ImageService, LinkService, TableService, PasteCleanupService, ToolbarSettingsModel, RichTextEditorComponent } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
imports: [
RichTextEditorModule
],
standalone: true,
selector: 'app-root',
template: `<ejs-richtexteditor #rte id='editor' [(value)]='value'></ejs-richtexteditor>
<br>
<button ejs-button (click)='clearUndoRedoStack(rte)' cssClass='e-primary'>Clear Undo/Redo Stack</button>`,
providers: [ToolbarService, HtmlEditorService, QuickToolbarService, ImageService, LinkService, TableService, PasteCleanupService]
})
export class AppComponent {
public value: string = "<p>The Rich Text Editor triggers events based on its actions. </p><p> The events can be used as an extension point to perform custom operations.</p><ul><li>created - Triggers when the component is rendered.</li><li>change - Triggers only when Rich Text Editor is blurred and changes are done to the content.</li><li>focus - Triggers when Rich Text Editor is focused in.</li><li>blur - Triggers when Rich Text Editor is focused out.</li><li>actionBegin - Triggers before command execution using toolbar items or executeCommand method.</li><li>actionComplete - Triggers after command execution using toolbar items or executeCommand method.</li><li>destroyed – Triggers when the component is destroyed.</li></ul>";
clearUndoRedoStack(rte: RichTextEditorComponent): void {
rte.clearUndoRedo();
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));