富文本編輯器實現@提示的功能

說明：

業務（vue)上須要使用富文本編輯器留言，還須要帶有提示人的功能，就是和百度貼吧或者豆瓣上的留言中的相似，我使用的是wangEditor富文本編輯器，如下是我實現的過程：（作了一些兼容，可是不是很完美，若是大佬能夠指點一二，我將感激涕零）
本文參考了的文章連接：
1.另外一種場景下的js @提到好友
2.web 前端 @ 功能 JS 實現分析及其原理

正文

1、使用到的JavaScript對象：
1.Range
Range對象表示的包含節點或者文本節點一段片斷
2.Selection
Selection對象表示用戶的光標開始位置到結束位置的選區
（以上是個人我的理解，具體的須要到MDN上查閱）
2、實現的原理
1.首先經過const selection = Window.getSelection(),
const range = selection.getrangeAt(0)獲取光標的位置，我使用的是create-pos插件準確獲取光標的位置
2.而後監聽鍵盤事件，在輸入@後，經過Range對象中的setStart(), setEnd()兩個方法選中@這個文本節點
3.而後使用Range中deleteContents刪除@
4.建立兩個新的span標籤，把@+選中的內容讓放到其中一個新建的span標籤中，另一個span標籤插入空格
5.建立一個fragment片斷，把第四步中兩個span標籤一次插入fragment中
6.最後使用Range對象中的insertNode()方法插入富文本中
7.刪除時，首先找到包含@+內容的節點，而後把整個節點一塊兒刪除
3、出現的問題
1.首先只輸入空格時，@不會被刪除，會出現兩個@，個人處理是判斷是否輸入的是空格，以及空格的個數，經過設置setStart()函數中的偏移量來刪除空格
2.能夠在Firefox,IE,Chrome,Edge使用
4、代碼地址： 源碼