富文本编辑器实现@提示的功能

说明：

业务（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、代码地址： 源码