layout | title | description | platform | control | documentation | domainurl |
---|---|---|---|---|---|---|
post |
History in Angular Document editor component | Syncfusion |
Learn here all about History in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more. |
ej2-angular |
History |
ug |
Document Editor tracks the history of all editing actions done in the document, which allows undo and redo functionality.
Inject the EditorHistory
module in your application to provide history preservation functionality for DocumentEditor
. Refer to the following code example.
import { Component, ViewEncapsulation } from '@angular/core';
import { DocumentEditorComponent, SfdtExportService, SelectionService, EditorService, EditorHistoryService } from '@syncfusion/ej2-angular-documenteditor';
@Component({
selector: 'app-container',
//specifies the template string for the Document Editor component
template: `<ejs-documenteditor #document_editor id="container" style="width: 100%;height: 100%;display:block" [isReadOnly]=false [enableSelection]=true [enableEditor]=true [enableEditorHistory]=true >
</ejs-documenteditor>`,
encapsulation: ViewEncapsulation.None,
//Inject require modules.
providers: [SfdtExportService, SelectionService, EditorService, EditorHistoryService]
})
export class AppComponent {
}
You can enable or disable history preservation for a document editor instance any time using the ‘enableEditorHistory’ property. Refer to the following sample code.
this.documentEditor.enableEditorHistory = false;
You can perform undo and redo by CTRL+Z
and CTRL+Y
keyboard shortcuts. Document Editor exposes API to do it programmatically.
To undo the last editing operation in document editor, refer to the following sample code.
this.documentEditor.editorHistory.undo();
To redo the last undone action, refer to the following code example.
this.documentEditor.editorHistory.redo();
History of editing actions will be maintained in stack, so that the last item will be reverted first. By default, document editor limits the size of undo and redo stacks to 500 each respectively. However, you can customize this limit. Refer to the following sample code.
//Set undo limit.
this.documentEditor.editorHistory.undoLimit = 400;
//Set redo limit.
this.documentEditor.editorHistory.redoLimit = 400;