编辑器re/undo设计与实现

编辑器撤销(undo)与重做(redo)插件的设计与实现 ，涉及三个方面：

 

1. 编辑器状态定义

 

不仅要包含当前编辑器的内容（body.innerHTML），还要考虑编辑区域用户的选中状态，用户选中每个区域进行高亮等操作，则操作前要把当前选中区域以及内容html都要保存下来：

 

 

 

/**
     * 当前编辑区域状态，包括html与选择区域
     * @param editor
     */
    function Snapshot(editor) {
        var contents = editor.getData(),selection = contents && editor.getSelection();
        //内容html
        this.contents = contents;
        //选择区域书签标志
        this.bookmarks = selection && selection.createBookmarks2(true);
    }

 

2.编辑状态历史的管理

历史管理器维护着编辑状态的栈数据， 其他插件通过触发编辑器的 save 与 restore 事件来通知历史管理器更新内部的状态。

当 save 操作时，历史管理器将当前状态添加到编辑状态栈即可，并更新内部游标。

 

 

restore 操作时，需要利用管理器内部的游标来在状态栈间前（undo）后（redo）游走，用游标处的状态替换当前状态。

 

 

注意点在于，当进行了re/undo操作后，再进行save状态保存，需要对状态栈进行清理，将当前游标以后的历史状态删掉，防止出现历史分支：

 

 

 

 

另一点在于:对于键盘的连续输入，可buffer处理，只有当空闲一定时间后才进行保存，避免细微冗余信息。

 

/**
 * 通过编辑器的save与restore事件，编辑器实例的历史栈管理，与键盘监控
 * @param editor
 */
function UndoManager(editor) {
    //redo undo history stack
    /**
     * 编辑器状态历史保存
     */
    this.history = [];
    this.index = 0;
    this.editor = editor;
    this.bufferTimer = new BufferTimer(500, this.save, this);
    this._init();
}
S.augment(UndoManager, {
    /**
     * 监控键盘输入，buffer处理
     * @param ev
     */
    _keyMonitor: function (ev) {
        //ctrl+z，撤销
        //ctrl+y，重做
        //其他可见字符buffer处理
    },
    _init: function () {
        var self = this,
            editor = self.editor;
        //外部通过editor触发save|restore,管理器捕获事件处理
        editor.on("save", function (ev) {
            if (ev.buffer)
            //键盘操作需要缓存
            self.bufferTimer.run();
            else {
                //其他立即save
                self.save();
            }
        });
        //un/re do  
        editor.on("restore", this.restore, this);
        self._keyMonitor();
        //先save一下
        self.save();
    },
    /**
     * 保存历史
     */
    save: function () {
        //游标后面的历史抛弃
        //超过占最大容量，shift队列出列 
        //当前状态和栈顶状态不同，入栈
        //更新游标  
        //触发afterSave事件  
    },
    /**
     *
     * @param ev
     * ev.d ：1.向前撤销 ，-1.向后重做
     */
    restore: function (ev) {
        //更新游标，用游标所在状态替换当前状态
    }
});

 

3.工具栏 ui 与功能调用

RestoreUI 封装工具栏撤销与重做的功能与表现，使用 attribute 抽象出三状态按钮（可用并选中，可用，禁用），监听通过2触发的编辑器 afterSave，afterRestore 事件，通过游标位置和历史栈大小的比较，来决定redo ,undo按钮的禁用与可用状态.

 

/**
             * save,restore完，更新工具栏状态
             */
            editor.on("afterSave", this._respond, this);
            editor.on("afterRestore", this._respond, this);

 

undo:当游标不在状态栈底部时可用（index>0&&history.length>0）

redo:当游标不在状态栈顶部时可用（index < history.length-1）

当点击工具栏按钮时，触发editor的restore事件，注意参数，redo为向后restore，undo为向前restore。

 

/**
             * 触发重做或撤销动作，都是restore，方向不同
             */
            self.el.on("click", function() {
                editor.fire("restore", {
                    d:RedoMap[self.text]
                });
            });

 

 

4.整合

当编辑器实例生成后，全局空间事件通知undo/redo插件，插件对每个编辑器生成对应的历史管理器与工具栏按钮：

 

KE.on("instanceCreated", function(ev) {
        var editor = ev.editor;

        /**
         * 编辑器历史中央管理
         */
        new UndoManager(editor);

        /**
         * 撤销工具栏按钮
         */
        new RestoreUI(editor, "undo");
        /**
         * 重做工具栏按钮
         */
        new RestoreUI(editor, "redo");
    });

 

 

 

插件源码

demo