項目背景：聊天功能，在一個可編輯的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標簽內，反之，輸入的內容是一個新的文本