javascript - 如何与浏览器 control+z/control+y 交互以进行撤消/重做？

Question

我正在创建我自己的编辑器，我终于解决了我数周以来一直在回避的撤消/重做问题。

我已经创建了用于存储和遍历自定义操作历史的基本框架，但我似乎无法在 contentEditable 中找到有关如何与浏览器 历史交互的好信息。地区。

查看https://github.com/jzaefferer/undo/blob/master/undo.js , 我仍然不明白这是怎么做到的。

我可以撤消/重做我的自定义操作，但我不知道如何利用浏览器的默认历史记录。

如果我要覆盖默认的control + ( z | y )，是否必须添加所有 原始功能？

更新:我在哪里可以找到有关浏览器如何处理这些撤消/重做操作的更多信息？

Answer 1

查看 contenteditable demo 的来源了解更多关于他如何将库附加到 div 的信息。

$(function() {
    var stack = new Undo.Stack(),
        EditCommand = Undo.Command.extend({
            constructor: function(textarea, oldValue, newValue) {
                this.textarea = textarea;
                this.oldValue = oldValue;
                this.newValue = newValue;
            },
            execute: function() {
            },
            undo: function() {
                this.textarea.html(this.oldValue);
            },

            redo: function() {
                this.textarea.html(this.newValue);
            }
        });
    stack.changed = function() {
        stackUI();
    };

    var undo = $(".undo"),
        redo = $(".redo"),
        dirty = $(".dirty");
    function stackUI() {
        undo.attr("disabled", !stack.canUndo());
        redo.attr("disabled", !stack.canRedo());
        dirty.toggle(stack.dirty());
    }
    stackUI();

    $(document.body).delegate(".undo, .redo, .save", "click", function() {
        var what = $(this).attr("class");
        stack[what]();
        return false;
    });

    var text = $("#text"),
        startValue = text.html(),
        timer;
    $("#text").bind("keyup", function() {
        // a way too simple algorithm in place of single-character undo
        clearTimeout(timer);
        timer = setTimeout(function() {
            var newValue = text.html();
            // ignore meta key presses
            if (newValue != startValue) {
                // this could try and make a diff instead of storing snapshots
                stack.execute(new EditCommand(text, startValue, newValue));
                startValue = newValue;
            }
        }, 250);
    });

    $(".bold").click(function() {
        document.execCommand("bold", false);
        var newValue = text.html(); 
        stack.execute(new EditCommand(text, startValue, newValue));
        startValue = newValue;
    });

            // This is where he attaches the observer for undo / redo.
            // For more information: https://stackoverflow.com/questions/16006583/capturing-ctrlz-key-combination-in-javascript
    $(document).keydown(function(event) {
        if (!event.metaKey || event.keyCode != 90) {
            return;
        }
        event.preventDefault();
        if (event.shiftKey) {
            stack.canRedo() && stack.redo()
        } else {
            stack.canUndo() && stack.undo();
        }
    });
});

Capturing ctrl+z key combination in javascript