上周抽空把去年写的富文本重写了一下，封装成基本UI组件，就可以在聊天框之外的地方复用了。个人觉得富文本是个兼容问题最多的模块之一，尤其是文档也没几个，把mozilla的api文档和IE的dom api关于selection和range的看了一个遍，一个个试，总算找到勉强能用的方法。
其实之前的富文本代码太乱，而且还有不少bug，只是产品经理不给时间改，O__O”…
这个富文本没有用iframe来做输入框，原因有二:
- iframe是所有dom节点中消耗性能最大的，开多几个ie6/7就会卡到不行了;
- 因为webqq是多窗口聊天的，当光标点击到输入框时，iframe会捕获鼠标事件，通知不了聊天窗设置样式;
所以就用了div，设置contentEditable=”true”，这个属性基本浏览器都支持，除了firefox2.0(不过还真有用户还在用ff2.0⊙﹏⊙b汗)
这次修改发现了不少蛋疼的兼容性问题，挑几个归纳一下:
1. 光标位置的保存/还原
富文本很大一部分兼容问题在于保存和还原光标的位置。说起光标位置，有个要注意的地方就是不要随便调用focus方法，连续调用两次focus会导致光标失去， 跟调用blur的效果一样，最好的方式就是让调用方在调用的时候保证光标在输入框中，内部代码中不要调用focus。
保存就不说了，keyup/mouseup的时候把当前的range存起来(这里有性能问题，但是blur事件又不能用，产生这个事件的时候，光标已经移到别处了)，但是要保证光标在输入框中，否则range就是document的。
这里要注意到是，ie9支持了window.getSelection方法，但是，它拿到的range对象没有createContextualFragment方法，这个方法可以传入一个html字符串，直接生成dom节点，跟pasteHTML有点类似，具体说明可以点击这里查看。因此自己封装的getSelection方法，要把document.selection放在前面。
还原光标位置，对于高级浏览器，直接把原来的range添加到selection就行，像这样
|
1
2
|
selection.removeAllRanges();selection.addRange(this._lastRange); |
ie则有两种方法:
- getBookmark和moveToBookmark
双击选中源代码 123varrange = RichEditor.getRange();range.moveToBookmark(this._lastBookmark);range.select(); - setEndPoint
双击选中源代码 1234range.setEndPoint('EndToStart',this._lastRange);range.collapse(false);range.setEndPoint('EndToEnd',this._lastRange);range.select();
这里说下setEndPoint的原理:
- 先保存lastRange，如”ABCDEFG”中的”CDE”
- 把新的range的结尾移动到lastRange的开头(即”C”的左边)
- 然后调用 collapse(false)把光标的插入点移动到range的结尾，也就是把range的开头和结尾合并在一起，不这样处理的话，调用select之后会选中”AB”(即选中”C”之前的所有内容)
- 把range的结尾移动到lastRange的结尾(即”E”的右边)
- 选中该range就能把上次保存的选区还原了(即选中”CDE”)
2. 换行处理
当在输入框按下回车键之后，ie会生成一个新的<p></p>段落标签，ff是<br>，chrome则是<div></div>。这也不是什么大问题，但是会让后续的处理产生麻烦， 理想的情况就是任何浏览器里输入框的内容都一样。所以这里要监控输入框的keydown事件，如果是回车，则阻止浏览器的默认行为，使用代码插入一个换行标签<br>。
注意1: opera的keydown事件是没办法阻止默认行为的，要用keypress事件代替。
注意2:当chrome的光标在一行的末尾的时候，插入一个<br/>并不能让光标移动到下一行，还需要在<br/>后面插入一个额外的节点才能跳到下一样。因此可以先插入<br/> ，然后把html空格” ”删除即可。
3. 删除处理(ie)
ie中如果选中一个图片或input等节点，按下退格键的话，会触发浏览器的后退处理，跟调用history.back()一样的效果，可以在keydown的时候判断选中内容的类型，如果是control类型，则阻止浏览器的行为，使用代码删除。
|
1
2
3
4
5
|
var selection = RichEditor.getSelection();if (selection.type.toLowerCase() === 'control') { e.preventDefault(); selection.clear();} |
PS: 这种情况只存在于使用div做输入框的情况，iframe没有。
4. 粘贴&拖拽处理
聊天窗的输入框跟一般的富文本不太一样，想发表文章用的富文本，是可以允许粘贴html片段进来的。但是聊天框里贴入html片段会导致样式很乱，影响体验。而且里面的图片都必须先上传到服务器才能使用。因此要对贴入的内容进行过滤。
之前的处理是直接把所有内容用正则过滤一遍，放过<br>和部分有标识的标签，其余一概删掉，然后再重新插入输入框。这样处理比较简单，但是会导致过滤后的光标无法找回原来的地方，体验不好。
现在是用遍历dom的方法，遍历输入框的直接子节点，把其中的文本提取出来，创建TextNode，并替换掉它的父节点，这里用到两个比较重要的属性:
- textContent(标准浏览器): textContent保存了它所有的子孙节点的文本，去除了所有Element节点
- innerText(ie): ie没有textContent属性，但是可以用innerText代替
注意: opera没有onpaste事件，只能捕捉到ctrl+v的粘贴行为，而且很意外的keypress的v键keyCode 还是86。右键贴入的就没办法了，连编辑的div连oninput事件也触发不了 O__O”…
5. 插入处理
标准浏览器(非ie)要在光标处插入内容，可以用range.createContextualFragment创建一个html片段，调用range.insertNode插入。用这种方法插入后，光标会消失，要把光标重新定位显示。
|
1
2
3
4
5
6
7
8
9
|
var fragment = range.createContextualFragment(html);var lastNode = fragment.lastChild;range.insertNode(fragment);//插入后把开始和结束位置都放到lastNode后面, 然后添加到selectionrange.setEndAfter(lastNode);range.setStartAfter(lastNode);var selection = RichEditor.getSelection();selection.removeAllRanges();selection.addRange(range); |
ie就简单多了, 虽然也不见得是什么好事
|
1
2
3
|
range.pasteHTML(html);range.collapse(false);range.select(); |
6. 插入后的光标定位
插入html片段后，如果出现了滚动条，在非ie浏览器里，光标已经在可视区下面，而且不会自动滚动到可视区域。解决办法是插入html片段的时候，在后面添加多一个宽高都是0的图片，然后计算图片相对输入框的位置是否已经超出了输入框的可视范围。如果是，将输入框滚动定位到图片处，之后将图片删除。
这里之所以用图片，是因为他是display: inline;的元素，不会导致内容换行，又可以设置宽高，让其对用户不可见，是在是杀人越货必备之品。
代码如下:
|
1
2
3
4
5
6
7
8
|
html += '<img class="focus_mark" alt="" />';var fragment = range.createContextualFragment(html);var lastNode = fragment.lastChild;//..........var divArea = this._divArea;var pos = $D.getRelativeXY(lastNode, divArea);divArea.scrollTop = pos[1] < divArea.scrollHeight ? divArea.scrollHeight : pos[1];document.execCommand('Delete', false, null);// 删除附加的节点 |
这里也可以用lastNode.scrollIntoView()滚动到可视区域的, 只是ff如果打开了firebug, 会导致webqq的样式错乱, 其他网站也许可以测试看看.
7. 保证range在输入框中
前面很多方法的执行前提都是当前焦点在输入框中，否则如果焦点在document上的话，插入的html会显示在页面的左上角，就是一个大bug了。
判断一个range是否在输入框中，可以对range的父节点进行判断，如果其parentNode是输入框或者在输入框里面，则是正确的range。 标准浏览器可以用range.commonAncestorContainer获得父节点，ie则是range.parentElement()。比较的方法是compareDocumentPosition(w3c)和contains(ie)，具体怎么用就不说了，这里有个说明及封装好的代码。
以上的问题都是windows平台的，linux上也有问题，但是还没测，待续…