元に戻すスタックを維持しながら Contenteditable 要素のコンテンツを更新する方法

JavaScript を使用した contenteditable 要素の Undo スタックの管理

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 フォールバックとカスタム Undo 管理の使用

代替方法: 互換性のために 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 要素での Undo の管理に関するよくある質問

1. 元に戻すスタックを操作する最も一般的な方法は何ですか?
2. 以前の最も一般的な方法は、 document.execCommand API ですが、現在は非推奨になっています。
3. JavaScript で直接元に戻すスタックを操作できますか?
4. 元に戻すスタックを直接操作できるネイティブ API はありません。元に戻す機能を手動で管理するか、カスタム スタックなどの回避策を使用する必要があります。
5. どうやって MutationObserver 元に戻す機能をサポートしますか?
6. の MutationObserver を使用すると、DOM への変更を監視し、元に戻す履歴をリセットせずにそれらの変更に対応できます。
7. 代替品は何ですか execCommand アンドゥ管理用?
8. 代わりに、カスタムの元に戻すスタックを作成したり、内部で状態を管理してより適切に制御できる React などのフレームワークを使用したりすることもできます。
9. イベント リスナーを使用してカスタムの元に戻す動作を実装できますか?
10. はい、次のようなキー押下イベントをリッスンすることで、 Ctrl + Z、特定のユーザーアクションに合わせた独自の元に戻す機能を実装できます。

JavaScript での Undo スタックの管理に関する最終的な考え

コンテンツを動的に更新しながら、元に戻すスタックを維持する コンテンツ編集可能 要素は、特に execCommand などの非推奨の API の場合、注意が必要な場合があります。幸いなことに、カスタム Undo スタックや MutationObserver などの最新の技術が代替ソリューションを提供します。

ユーザーの選択を注意深く管理し、イベントベースのアプローチを使用することで、元に戻す機能を効果的に保持することができます。開発者は、リッチ テキスト編集や動的コンテンツを処理するときにこれらの代替手段を考慮し、シームレスなユーザー エクスペリエンスを確保する必要があります。