【实战】我是如何在输入框实现 @ 功能的

以下内容来自公众号逆锋起笔，关注每日干货及时送达

作者：InfinityTomorrow 授权转载 链接：https://juejin.cn/post/6982251438332182542

最近接手了一个需求，在评论框中实现 @At通知用户的功能。这个可以说是我的知识盲点了，但是其实很多应用都有这类功能了，例如：QQ空间、微博搜索、企业微信的TAPD...但是一看就不想不做～(产品经理ps：为什么别人可以做你不可以做？)

明确目标

二、技术方案分析

在寻求我们的技术方案的时候、我们首先要明确我们想要的功能是什么

你知道自己想要什么，知道要去哪儿、当我们把需求、功能、拆解的很细的时候可以节约我们走弯路的时间(ps:不要问我怎么知道的)

当前需求的拆解

1. 按住 shift + @ 的时候，弹出通知列表

2. 选择时 @的用户标签插入当前的光标位置中

3. 生成 @的用户标签的规则是：高亮、携带用户ID、一键删除信息、不可以编辑。

4. 文本框要随内容自适应高度

5. Android、 IOS、 Web显示多端一致。

6. 具有扩张性，未来评论可能插入图片文件等....

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>