项目背景：聊天功能，在一个可编辑的div内，@人员后光标位置应该在人员后面
关键代码
输入框按下@时记录range和selection
sel = window.getSelection()
range = sel.getRangeAt(0)
删除输入框中的@，因为要使用a标签包裹的@（<a>@张三</a>）
设置一个range范围，删除@
range.setStart(range.endContainer, range.startOffset)
range.setEnd(range.endContainer, range.startOffset + 1)
range.deleteContents()
插入新的包含a标签的node,frag中包含2个节点，a标签和空格
range.insertNode(frag)
重新设置光标位置,lastNode是空格，文本节点
光标位置在空格后面，偏移量是1个字符
range.setStart(lastNode,1)
range.setEnd(lastNode,1)
清除所有其他range，添加应用新range
sel.removeAllRange()
sel.addRange()
其他提示：插入a标签后继续输入内容时，如果a标签没有href属性，将导致输入的内容也在a标签内，反之，输入的内容是一个新的文本
