所用插件：vue-quill-editor
版本("vue-quill-editor": "^3.0.6", "quill": "^1.3.7",)
文档参考：
实现思路：
- 既然要实现@的功能，那肯定需要在输入框里面监听所输入的内容；
- 既然监听到了@按键，@ 人员之后如何让文字变颜色呢？如何在输入框文字不同的位置插入@人员呢？那普通的输入框肯定就不好实现了，但是富文本编辑器是可以的，所以选用了富文本的编辑器；
- 文本框编辑完成，@人员也写好了，以何种格式传给后端，后端去实现选中人员的推送？以及内容发布成功之后，前端对特殊的@人员的展示问题呢？
带着这样的问题，我们开始：
- 文本框选用富文本的编辑器；
- 前后端沟通，协商出一个所需要的一个数据文本结构。我们这边是 协商的是，数据at 人员的列表，列表的数据里面包含at 人员的id , <at> 标签，然后其他的比如我自己需要的 @人员的文字的位置，名字等其他字段。<at>特殊的标签，标签里面的参数，数据都在发布的时候传给到后端 类似于 “<at open_id="
{item.userId}">${nameNew}</at>” 这样的方式；
- 那既然这样，那就可以开始尝试如何@人员；
- quill编辑器里面有一种方法 可以监听输入文本的内容： this.quillEdit.on('text-change', (delta, oldDelta, source) => {})可以监听@ 然后可以去唤起咱们所需要选择的人员选择器列表；
- 人员选择，如何将人员要带到输入框里面呢？同时还要将文字变成自己想要的颜色？ 经过大量的尝试和参考文档，发现了有几个方法insertText， formatText，removeFormat，setSelection；
@人员添加到输入框
这样就很优秀了嘛！
- 在添加每一个人员的同时，需要记录添加的人员的一些数据； 主要数据包括： 1）选中的人的文字个数字段：所添加的人的文字字数+@（后面用来删除用）； 2）@这个人员在文本中的文字的位置字段，同时这个字段在用户从前面插入文字的时候需要同时更新这个字段。（也是用于后面删除用的） 3）选中人员的 id;
- <at>标签 5） 将上面的这些数据 在发布的时候可传入到后端。
-
添加上了之后，那删除要怎样呢？
删除时
- 可以添加，可以删除，那剩下的工作就是要数据处理了。
- 提交数据给后端，前端发布展示的时候 可以根据at 的标签 去正则匹配 换成可展示的名字
- 提几个注意的点： 1）在手机上富文本编辑器，如果在@的时候文本正好换行了，监听的时候可能需要监听'@\n'； 2）一些文案复制粘贴过来的时候，可能需要特殊处理； 3）@人员时候 在名字中间再次@的时候的问题； 4）删除时候需要一些特殊处理
时间有限，文章写的有点偏口语化，之后有时间会再整理一下。
需要源文件请私我
