设置div为contenteditable=true如何实现修改后撤消操作？

在前端开发中，如果你有一个 div 元素，其 contenteditable 属性设置为 true，那么用户可以直接在该元素中编辑内容。实现撤销（undo）操作通常涉及到跟踪用户的编辑历史。虽然浏览器提供了一些默认的撤销/重做功能（例如，通过 document.execCommand('undo') 和 document.execCommand('redo')），但这些功能可能因浏览器和版本的不同而表现不一致。

为了更可靠地实现撤销操作，你可以自己编写代码来跟踪编辑历史。以下是一个简单的示例，展示了如何使用 JavaScript 和一个堆栈（stack）数据结构来跟踪和撤销对 contenteditable div 的修改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ContentEditable Undo Example</title>
</head>
<body>

<div id="editableDiv" contenteditable="true" style="border: 1px solid black; height: 100px;">
    Edit this text and try undoing changes!
</div>
<button id="undoBtn">Undo</button>

<script>
    const editableDiv = document.getElementById('editableDiv');
    const undoBtn = document.getElementById('undoBtn');
    let historyStack = [];
    let currentContent = editableDiv.innerHTML;

    editableDiv.addEventListener('input', function() {
        // 在每次输入时，将当前内容推送到历史堆栈中
        historyStack.push(currentContent);
        currentContent = editableDiv.innerHTML;
    });

    undoBtn.addEventListener('click', function() {
        // 当点击撤销按钮时，从历史堆栈中弹出上一次的内容，并恢复它
        if (historyStack.length > 0) {
            const previousContent = historyStack.pop();
            editableDiv.innerHTML = previousContent;
            currentContent = previousContent; // 更新当前内容
        } else {
            alert('No more changes to undo!');
        }
    });
</script>

</body>
</html>