继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

富文本编辑器小记 — 关于撤销、重做操作

花满楼的小前端a
关注TA
已关注
手记 42
粉丝 111
获赞 2213

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

关于富文本编辑器,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改写之前的第二版编辑器,顺便填一填坑,貌似玩偏了。。。

打开App,阅读手记
5人推荐
发表评论
随时随地看视频慕课网APP

热门评论

哪个富文本编辑器好用?

查看全部评论