富文本兼容性问题归纳(win)

上周抽空把去年写的富文本重写了一下，封装成基本UI组件，就可以在聊天框之外的地方复用了。个人觉得富文本是个兼容问题最多的模块之一，尤其是文档也没几个，把mozilla的api文档和IE的dom api关于selection和range的看了一个遍，一个个试，总算找到勉强能用的方法。

其实之前的富文本代码太乱，而且还有不少bug，只是产品经理不给时间改，O__O”…

这个富文本没有用iframe来做输入框，原因有二:

  1. iframe是所有dom节点中消耗性能最大的，开多几个ie6/7就会卡到不行了;
  2. 因为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则有两种方法:

  1. getBookmark和moveToBookmark
    双击选中源代码
    1
    2
    3
    var range = RichEditor.getRange();
    range.moveToBookmark(this._lastBookmark);
    range.select();
  2. setEndPoint
    双击选中源代码
    1
    2
    3
    4
    range.setEndPoint('EndToStart', this._lastRange);
    range.collapse(false);
    range.setEndPoint('EndToEnd', this._lastRange);
    range.select();

这里说下setEndPoint的原理:

  1. 先保存lastRange，如”ABCDEFG”中的”CDE”
  2. 把新的range的结尾移动到lastRange的开头(即”C”的左边)
  3. 然后调用 collapse(false)把光标的插入点移动到range的结尾，也就是把range的开头和结尾合并在一起，不这样处理的话，调用select之后会选中”AB”(即选中”C”之前的所有内容)
  4. 把range的结尾移动到lastRange的结尾(即”E”的右边)
  5. 选中该range就能把上次保存的选区还原了(即选中”CDE”)

2. 换行处理

当在输入框按下回车键之后，ie会生成一个新的<p></p>段落标签，ff是<br>，chrome则是<div></div>。这也不是什么大问题，但是会让后续的处理产生麻烦， 理想的情况就是任何浏览器里输入框的内容都一样。所以这里要监控输入框的keydown事件，如果是回车，则阻止浏览器的默认行为，使用代码插入一个换行标签<br>。

注意1: opera的keydown事件是没办法阻止默认行为的，要用keypress事件代替。

注意2:当chrome的光标在一行的末尾的时候，插入一个<br/>并不能让光标移动到下一行，还需要在<br/>后面插入一个额外的节点才能跳到下一样。因此可以先插入<br/>&nbsp;，然后把html空格”&nbsp;”删除即可。

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，并替换掉它的父节点，这里用到两个比较重要的属性:

  1. textContent(标准浏览器): textContent保存了它所有的子孙节点的文本，去除了所有Element节点
  2. 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后面, 然后添加到selection
range.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;的元素，不会导致内容换行，又可以设置宽高，让其对用户不可见，是在是杀人越货必备之品。

代码如下:

JavaScript
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上也有问题，但是还没测，待续…

posted @ 2015-11-13 12:40  郑文亮  阅读(3698)  评论(0)  编辑  收藏  举报