作为前端开发工程师，我们经常需要使用contenteditable属性来使页面中的元素可编辑。但是，很多时候我们需要实现撤销/重做的功能来方便用户对文本内容进行修改和操作。
那么，如何才能通过设置 contenteditable="true" 属性来实现撤销和重做的功能呢？接下来将会详细介绍实现方法。
知识储备：浏览器提供的API
在介绍如何实现撤销/重做功能之前，我们先来了解一些基础知识。在浏览器中，我们可以使用 document.execCommand() 方法来执行文本命令，并对网页内容进行修改。
document.execCommand(command, showUI, value);
command: 需要执行的命令名称，比如"bold"(加粗), "italic"(斜体), "insertImage"(插入图片)等。showUI: 是否显示一个与系统直接相关的用户界面，默认为false。value: 执行命令时使用的值（如字体大小、颜色等）。
同时，浏览器还提供了修改历史记录的API：
window.history.back();
window.history.forward();
window.history.go(-1);
window.history.go(1);
接下来，让我们具体了解如何实现撤销/重做功能。
实现撤销/重做的方法
操作历史记录
我们首先需要记录每一步操作。当用户进行编辑操作时，我们可以将当前页面内容保存到一个数组中，并在用户执行Undo/Redo操作时，逐一恢复之前的操作状态。
const data = [];
function save() {
data.push(document.querySelector('.editor').innerHTML);
}
这段代码定义了一个数组 data，然后使用document.querySelector().innerHTML 来获取 .editor 元素的内容，将其存储到 data 中。
当需要执行 Undo/Redo 操作时，我们从 data 数组中取出相应的数据并重新赋值给页面元素：
function undo() {
if (data.length > 0) {
document.querySelector('.editor').innerHTML = data.pop();
}
}
function redo() {
// 参考上面的“undo()”函数实现即可
}
利用 execCommand 方法实现撤销/重做
execCommand() 函数本身就支持撤销和重做功能，并且浏览器会为修改动作生成一条历史记录，所以我们可以直接利用 execCommand() 的撤销和重做命令来实现撤销/重做功能。
function undo() {
document.execCommand('undo', false, null);
}
function redo() {
document.execCommand('redo', false, null);
}
这种方法不需要手动进行历史记录的维护，而是让浏览器自己来管理网页的历史记录。
小结
综上所述，实现撤销/重做操作可以通过两种方法：手动维护历史记录数组或者利用 execCommand() 的内置撤销/重做命令。这两种方法各有优缺点，根据具体需求选择不同的实现方式。
在实际应用中，我们需要注意一些问题：
- 需要对编辑状态进行保存和恢复。
- 对于元素节点较多的情况下，手动维护历史记录数组会占用较大的内存，这时候使用
execCommand()函数较为适合。
