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

作为前端开发工程师，我们经常需要使用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()函数较为适合。