Javascript: Track Changes HTML Editor 初步原理分析 (吐血作)

最近我对Track Changes HTML Editor组件进行了功能更新，继续完善，等后续的2.0版本将重新开发底层代码。下面是我总结了开发Track Changes HTML Editor的简单思路，供大家参考。作为我的第一篇吐血作。

1. 首先，这套系统我是使用Joomla惯用的Mootools这套Js框架来开发TcEditor(Track Changes HTML Editor简称)，版本是mootools v1.2。使用这个框架主要是js语法上面可以省略很多code。
2. Track Changes的核心技术用到两类：

  (1) JS的键盘 钩子(Hook Handle) 技术:

          在tcEditor里面的turn on/off track changes function技术上讲就是 开启/关闭 track changes的键盘钩子。
          Hook Handle的作用：比如用户type文字或按backspace等键，这个时候就是需要触发键盘事件。Track Changes 的Hook Handle开启之后，运作原理是这样的：先截获用户的键盘按键，将按键操作的keycode等进行识别判断，根据不同的识别结果去执行不同的Track Changes的功能，比如新增文字还是删除文字，并且在最后将用户原本系统按键锁产生的效果屏蔽掉。

   (2) DOM 技术

          新增功能(INS)：当我解决了hook handle技术之后，紧接着就开始实现针对上面红色字体标注的功能。这块功能需要对DOM进行操作，当新增文字的时候，首先获取当前光标的位置，然后截获keycode，比如按了"x"键，这个时候我屏蔽系统键盘按键，不让系统在编辑区打入x字符，而是我用脚本去生成带有tag的字符，比如<INS>x</INS>，此时被INS tag框住的x字符就成绿色。当你进行第二次type的时候，首先实现和前面一样的效果，然后多一步判断，判断第二次type的INS附近有没有INS，有则进行合并操作。以此类推。
          删除功能(DEL)：目前删除功能是对Backspace按键进行了重写，当系统截获到用户按键是backspace的时候，进行操作：获取光标位置，获取前一个字母并加上<DEL>tag，比如abcde->ab<DEL>c</DEL>de，然后当你按第二次backspace键的时候，同样先这样a<DEL>b</DEL><DEL>c</DEL>de，再合并->a<DEL>bc</DEL>de，完成一次删除操作。
 
附注：1. 需要注意很多细节，比如abc<DEL>def</DEL>gh，此时去删g，需要判断前面是否有DEL或者其他tag，并采取不同的操作。
            2. 在<INS>abcdgh</INS>中新增ef两个文字，这个时候需要判断当前光标的父DOM是不是INS，如果是则不再加INS tag，否则加上INS tag。删除操作同样如此，DEL里的操作也同样如此。
            3. 还有其余n多小细节：firefox里按backspace，如果浏览器的历史页面存在，则浏览器会将页面跳到上一个历史页面。后来将这个问题fix了。
            4. 当选中一段文字进行删除或新增的时候，也需要做一些判断去实现相应的操作。还有就是当删除到文章第一个字母的时候报错等等细节性bug都一步步解决。
 
暂时我就先介绍这么多。不理解的朋友们可以再与我讨论。

附上最新 Track Changes HTML Editor 视屏：

     TcEditor 4月14日新增功能演示