设置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>

这个示例中的关键点是：

  1. 使用一个 div 元素，并设置其 contenteditable 属性为 true。
  2. 创建一个空的历史堆栈来存储编辑历史。
  3. 在 div 上添加一个 input 事件监听器，以便在用户进行编辑时将当前内容推送到历史堆栈中。
  4. 添加一个撤销按钮，并为其添加一个点击事件监听器。当点击该按钮时，从历史堆栈中弹出上一次的内容，并将其设置为 div 的当前内容。

请注意，这个示例是为了简单起见而编写的，并没有考虑性能优化或更复杂的编辑场景（如撤销多个连续的输入操作）。在实际应用中，你可能需要根据具体需求进行更详细的实现和优化。

posted @ 2025-01-04 10:17  王铁柱6  阅读(100)  评论(0)    收藏  举报