vue 下评论实现@ mention说起功能

需求：评论中添加@ mention 说起功能

原生的textarea是不能换行自适应高度的，因此有2种方案

• textarea js 实时计算高度
  
• div contenteditable="true"模拟一个textarea。但须要模拟placeholder

一开始我是使用的textarea js 计算高度（微博就是这种方式）， 可是产品要求；评论框要@他人，而且颜色高亮。找了个插件vue-tribute,作到最后一步了，发现人家说要想高亮就不能使用textarea，要使用div 模拟这种。具体能够继续往下看。因此个人最终方案是：

div contenteditable + vue-tribute 实现@ 说起功能

如何模拟能够看这两个文章

textarea如何实现高度自适应？

textarea自适应高度，div模仿textarea可编辑实现自适应高度，placeholder使用图标

不适合个人bug : 在火狐和Safari会平白无故就在div加了个<br>。 IOS 下 删除后并非空 而是<br> value的长度就是4 而不是0

产品1：知乎评论回复

看起来好像使用了Draft富文本

评论回复：

request：

response：

回答：

产品2 ： 微博评论回复

问题：使用的textarea 框内不能点击跳转 微博看起来是本身开发的富文本

调研：

1.Mention.js

• github
• demo
• 依赖： jquery，Typeahead

  

2. Caret.js + At.js

At.js的核心功能 是 Caret.js

• 获取插入符的位置或与输入器的偏移量
• 如今，它变成了一个简单的jquery插件，所以每一个人均可以使用它。
• At.js 也在用它

可是github上公告 ：如今At.js 已经不维护了， 推荐使用`zurb tribute`

• Caret github
• Caret demo
• At github

3. tribute

• tribute github
• tribute demo
• vue-tribute demo

要想跳转，高亮，不能是textarea、input。应该是 contenteditable="true"

总结：

最推荐使用vue-tribute ：

参数配置和tribute是同样的， 只是封装了一下专为vue使用的

参考：

语雀编辑器：之前是基于slate实现的，如今是蚂蚁本身研发 石墨文档：Quill