以下内容来自公众号逆锋起笔，关注每日干货及时送达
作者：InfinityTomorrow 授权转载 链接：https://juejin.cn/post/6982251438332182542
一、前言
最近接手了一个需求，在评论框中实现 @At通知用户的功能。这个可以说是我的知识盲点了，但是其实很多应用都有这类功能了，例如：QQ空间、微博搜索、企业微信的TAPD...但是一看就不想不做～(产品经理ps：为什么别人可以做你不可以做？)
明确目标
二、技术方案分析
在寻求我们的技术方案的时候、我们首先要明确我们想要的功能是什么
你知道自己想要什么，知道要去哪儿、当我们把需求、功能、拆解的很细的时候可以节约我们走弯路的时间(ps:不要问我怎么知道的)
当前需求的拆解
按住
shift + @的时候，弹出通知列表选择时
@的用户标签插入当前的光标位置中生成
@的用户标签的规则是：高亮、携带用户ID、一键删除信息、不可以编辑。文本框要随内容自适应高度
Android、IOS、Web显示多端一致。具有扩张性，未来评论可能插入图片文件等....
ps: 方案有很多种方式，适合自己、适合团队的才是最佳实践。没有完美的方案(ps:只有不听话的产品经理) 的产品经理)
textarea、input(例：新浪微博)流程大概都是(监听keyup, 获取光标位置拆入@的节点...), 但是...相信我如果你手写，你不会快乐的！！！所以推荐下面的库给大家、只要稍作改动就可以使用啦～～
Tribute.js(推荐, ES6)
At.js JQ)
contenteditable (例：QQ空间, 掘金)
HTML5新属性规定元素内容是否可编辑、可以做为编辑器使用，由于时间原因并没有深入体会、感兴趣的小伙伴可以看一下以下内容
contenteditable-MDN
contenteditable实现编辑器,光标、输入法处理
基于contenteditable技术实现@选人功能
富文本 (例：企业微信TAPD）
支持 文本、富文本、图片、拥有丰富的配置与强大的API。
因为考虑到扩展性与踩坑的深浅、api的丰富程度最终选择 wangeditor富文本 做为最终的方案。
既然选择好了方向，那就开冲吧、冲冲冲！！！
三、准备工作
本功能是基于 wangeditor富文本编辑器来实现的，本文 wangeditor版本4.3.0
npm i wangeditor --save
初始化一下项项目结构～
div>
template>
热门跟贴