在 vue 下为评论实现 @ 提及功能

需求：评论中添加@ 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