以下内容来自公众号逆锋起笔,关注每日干货及时送达
作者: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>
热门跟贴