标签：
关于富文本编辑器，真的是“非诚勿扰”啊！
关于富文本编辑器，IE一套，Firefox一套，W3C标准一套，so，作为前端，你懂的！
关于富文本编辑器，初入前端的童鞋不推荐自行实现，绕道UEditor吧！
关于富文本编辑器，几套标准又怎样，还有markdown呢，自行百度吧，反正我没啥兴趣！
花满楼的小站，作为我前端路上的试炼场，编辑器这里面的黑魔法，我当然也打算自己试着走一遭看看；小试一下后的第二个版本是这个样子的：
如上图，除了样子好看点，功能基本能用，说实话，在IE盛行的大环境下，我不敢拿出手！在此可不能随便黑我大IE了，IE那一套关于编辑器的做法还是很全的，只是chrome、firefox异军突起并带着各自的实现，导致编辑器这滩水更浑更深了；唉，兴，百姓苦；忘，百姓苦！浏览器诸雄争霸，苦的是咱前端啊！说多了都是泪啊，还是让我安静的做个美男子吧！
编辑器肯定少不了撤销、重做这俩操作，好消息是document.execCommand(‘redo|undo‘,false,false)，浏览器都支持，坏消息是只在各自的标准命令下支持，也就是说你要是自己实现一些命令他就不支持了；比如编辑器以外的业务需求，比如印刷业的名片编辑；比如我无聊做的和canvas相关的小玩意；这里的redo、undo就得自己想办法完成了，百度了一晚上，没看到能用的，只好周末自己折腾了。。。小伙伴们有完成了的实现，如不嫌弃，欢迎与我分享
少废话了，小二，上代码：
1 //如需记录某一步操作，操作之后memery.saveHtml(); 2 var memery={ 3 index:-1, 4 imgData:[], 5 saveOnce:function(data){ 6 this.index++, 7 this.imgData[this.index]=data; 8 }, 9 start:function (selector) { 10 $(‘.memeryHtmling‘).length&&$(‘.memeryHtmling‘).remove(); 11 var _dom=$(selector).clone(true); 12 $(selector).replaceWith(‘<a class="memeryHtmling"></a>‘); 13 $(‘.memeryHtmling‘).append(_dom); 14 this.saveOnce($(‘.memeryHtmling‘).html()); 15 }, 16 saveCanvas:function(w,h,data){ 17 this.saveOnce({width:w,height:h,data:data}); 18 }, 19 saveHtml:function(){ 20 this.saveOnce($(‘.memeryHtmling‘).html()); 21 }, 22 go:function(step,fn){ 23 if(!step||isNaN(step)) return !1; 24 var nowIndex=this.index, 25 tarStep=nowIndex+step; 26 tarStep<=0&&(tarStep=0); 27 tarStep>this.imgData.length-1&&(tarStep=this.imgData.length-1); 28 this.index=tarStep; 29 if ($(‘.memeryHtmling‘).length) { 30 $(‘.memeryHtmling‘).html(this.imgData[tarStep]); 31 fn&&fn(); 32 }else { 33 fn&&fn(this.imgData[tarStep]); 34 } 35 } 36 }
误打乱撞的初步实现，懒得看代码的，大侠请点这里看下实例；
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改写之前的第二版编辑器，顺便填一填坑，貌似玩偏了。。。
标签：
原文地址：http://www.cnblogs.com/hufeng/p/5426266.html
