Undo redo in EJ2 JavaScript Block Editor control

27 Jun 20256 minutes to read

The undo/redo feature in Block Editor enables users to revert or reapply changes made to the content, offering a safety net for edits and enhancing the overall editing experience.

Keyboard shortcuts

Action	Windows	Mac	Description
Undo	Ctrl + Z	⌘ + Z	Reverts the last action.
Redo	Ctrl + Y	⌘ + Y	Reapplies the last undone action.

Configuring Undo/Redo stack

Block Editor allows up to 30 Undo/Redo actions by default. You can modify the number of undo/redo steps using the undoRedoStack property.

Below example demonstrates the Block Editor with undo/redo stack set to 20 actions.

index.js
index.html
let blocksData = [
    {
        id: 'block-1',
        type: 'Heading',
        props: { level: 1},
        content: [
            {
                type: ej.blockeditor.ContentType.Text,
                content: 'Undo/Redo Demo'
            }
        ]
    },
    {
        id: 'block-2',
        type: 'Paragraph',
        content: [
            {
                type: ej.blockeditor.ContentType.Text,
                content: 'Try adding new blocks or modifying content below:'
            }
        ]
    },
    {
        id: 'block-3',
        type: 'Paragraph',
        content: [
            {
                type: ej.blockeditor.ContentType.Text,
                content: '1. Undo stack set to maximum 40 actions\n2. Press Ctrl+Z to undo\n3. Press Ctrl+Y to redo\n4. Actions include text edits, block moves, additions, deletions'
            }
        ]
    }
];

var blockeditor = new ej.blockeditor.BlockEditor({
    blocks: blocksData,
    undoRedoStack: 20
});
blockeditor.appendTo('#blockeditor_undo');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - BlockEditor</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-buttons/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-popups/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-inputs/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-navigations/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-splitbuttons/styles/fluent2.css" rel="stylesheet"/>
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-dropdowns/styles/fluent2.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-blockeditor/styles/fluent2.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="index.css" rel="stylesheet">

    <script src="https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container">
        <div id="blockeditor_undo"></div>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <style>
        #container {
            visibility: hidden;
            margin: 50px;
        }
    </style>

    <script src="index.js" type="text/javascript"></script>
</body>

</html>