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