如何在维护撤消堆栈的同时更新 Contenteditable 元素中的内容

使用 JavaScript 管理 contenteditable 元素中的撤消堆栈

使用 Selection API 和 MutationObserver 的前端解决方案

// This script handles innerHTML changes while preserving the undo stack
// It uses the Selection API and MutationObserver for better control

// Get the contenteditable element
const editableElement = document.querySelector('#editable');

// Save user selection (caret position)
function saveSelection() {
    const selection = window.getSelection();
    if (selection.rangeCount > 0) {
        return selection.getRangeAt(0);
    }
    return null;
}

// Restore user selection
function restoreSelection(range) {
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
}

// Watch for manual changes without resetting undo stack
const observer = new MutationObserver((mutations) => {
    // Handle content changes
    mutations.forEach((mutation) => {
        console.log('Content changed:', mutation);
    });
});

// Start observing the contenteditable element
observer.observe(editableElement, {
    childList: true,
    subtree: true,
    characterData: true
});

// Apply change without resetting undo stack
function safeInnerHTMLUpdate(newContent) {
    const savedRange = saveSelection();
    editableElement.innerHTML = newContent;
    restoreSelection(savedRange);
}

另一种方法：使用 execCommand Fallback 和自定义撤消管理

替代方法：利用 execCommand 实现兼容性

// Though deprecated, execCommand can still work as a fallback
// This script provides basic undo/redo functionality for innerHTML changes

const editable = document.querySelector('#editable');

// Save changes to a custom undo stack
let undoStack = [];
function saveState() {
    undoStack.push(editable.innerHTML);
    if (undoStack.length > 20) {
        undoStack.shift(); // Limit undo history to 20
    }
}

// Call this function when performing any changes
function updateContent(newHTML) {
    document.execCommand('insertHTML', false, newHTML);
    saveState();
}

// Implement undo function
function undo() {
    if (undoStack.length > 0) {
        editable.innerHTML = undoStack.pop();
    }
}

// Example usage: update content without losing undo stack
editable.addEventListener('input', () => {
    updateContent(editable.innerHTML);
});

有关在 contenteditable 元素中管理撤消的常见问题

1. 操作撤消堆栈的最常见方法是什么？
2. 过去最常见的方式是通过 document.execCommand API，尽管现在已弃用。
3. 您可以直接在 JavaScript 中操作撤消堆栈吗？
4. 没有本机 API 允许直接操作撤消堆栈。您必须手动管理撤消功能或使用自定义堆栈等解决方法。
5. 如何 MutationObserver 帮助撤消功能？
6. 这 MutationObserver 允许您观察 DOM 的更改并对这些更改做出反应，而无需重置撤消历史记录。
7. 有什么替代品 execCommand 用于撤消管理？
8. 替代方案包括创建自定义撤消堆栈或使用 React 等框架，这些框架在内部管理状态以实现更好的控制。
9. 事件侦听器可以用于实现自定义撤消行为吗？
10. 是的，通过监听按键事件，例如 Ctrl + Z，您可以实现针对特定用户操作定制的自己的撤消功能。

关于在 JavaScript 中管理撤消堆栈的最终想法

在动态更新内容的同时维护撤消堆栈 内容可编辑 元素可能很棘手，尤其是对于像 execCommand 这样已弃用的 API。幸运的是，诸如自定义撤消堆栈和 MutationObserver 之类的现代技术提供了替代解决方案。

通过仔细管理用户选择并使用基于事件的方法，可以有效地保留撤消功能。开发人员在处理富文本编辑或动态内容时应考虑这些替代方案，以确保无缝的用户体验。