富文本编辑器小记 — 关于撤销、重做操作-原创手记-慕课网

关于富文本编辑器，真的是“非诚勿扰”啊！

关于富文本编辑器，IE一套，Firefox一套，W3C标准一套，so，作为前端，你懂的！

关于富文本编辑器，初入前端的童鞋不推荐自行实现，绕道UEditor吧！

关于富文本编辑器，几套标准又怎样，还有markdown呢，自行百度吧，反正我没啥兴趣！

[花满楼的小站]，作为我前端路上的试炼场，编辑器这里面的黑魔法，我当然也打算自己试着走一遭看看；小试一下后的第二个版本是这个样子的：

如上图，除了样子好看点，功能基本能用，说实话，在IE盛行的大环境下，我不敢拿出手！在此可不能随便黑我大IE了，IE那一套关于编辑器的做法还是很全的，只是chrome、firefox异军突起并带着各自的实现，导致编辑器这滩水更浑更深了；唉，兴，百姓苦；忘，百姓苦！浏览器诸雄争霸，苦的是咱前端啊！说多了都是泪啊，还是让我安静的做个美男子吧！

编辑器肯定少不了撤销、重做这俩操作，好消息是document.execCommand('redo|undo',false,false)，浏览器都支持，坏消息是只在各自的标准命令下支持，也就是说你要是自己实现一些命令他就不支持了；比如编辑器以外的业务需求，比如印刷业的名片编辑；比如我无聊做的和canvas相关的小玩意；这里的redo、undo就得自己想办法完成了，百度了一晚上，没看到能用的，只好周末自己折腾了。。。小伙伴们有完成了的实现，如不嫌弃，欢迎与我分享

少废话了，小二，上代码!：

//如需记录某一步操作，操作之后memery.saveHtml();
var memery={
    index:-1,
    imgData:[],
    saveOnce:function(data){
        this.index++,
        this.imgData[this.index]=data;
    },
    start:function (selector) {
        $('.memeryHtmling').length&&$('.memeryHtmling').remove();
        var _dom=$(selector).clone(true);
        $(selector).replaceWith('<a class="memeryHtmling"></a>');
        $('.memeryHtmling').append(_dom);
        this.saveOnce($('.memeryHtmling').html());
    },
    saveCanvas:function(w,h,data){
        this.saveOnce({width:w,height:h,data:data});
    },
    saveHtml:function(){
        this.saveOnce($('.memeryHtmling').html());
    },
    go:function(step,fn){
        if(!step||isNaN(step)) return !1;
        var nowIndex=this.index,
            tarStep=nowIndex+step;
            tarStep<=0&&(tarStep=0);
            tarStep>this.imgData.length-1&&(tarStep=this.imgData.length-1);
            this.index=tarStep;
            if ($('.memeryHtmling').length) {
                $('.memeryHtmling').html(this.imgData[tarStep]);
                fn&&fn();
            }else {
                fn&&fn(this.imgData[tarStep]);
            }
    }
}

误打乱撞的初步实现，懒得看代码的，大侠请点这里看下实例；

memery提供了两个方法，分别用来记录canvas相关的操作和html相关的操作；canvas操作如需记录操作：memery.saveCanvas(w,h,data)即可；html操作，如一些节点的操作：这里有些不一样，假设了下containor本身会涉及一些绑值操作，所以记录之前要memery.start(selector)一下，然后接下来的操作之后memery.saveHtml()即可；

那么，说好的撤销、重做呢？这样的：memery.go(step,fn)；是的，撤销即memery.go(-1,fn)；重做即memery.go(1,fn)；如果是canvas操作，可以回调保存的data；如果是html操作，回不回调data没啥关系啦！

最近想用angular改写之前的第二版编辑器，顺便填一填坑，貌似玩偏了。。。