所用插件：vue-quill-editor
版本("vue-quill-editor": "^3.0.6", "quill": "^1.3.7",)
文檔參考：
實現(xiàn)思路：
- 既然要實現(xiàn)@的功能，那肯定需要在輸入框里面監(jiān)聽所輸入的內(nèi)容摆舟；
- 既然監(jiān)聽到了@按鍵闹究，@ 人員之后如何讓文字變顏色呢计维？如何在輸入框文字不同的位置插入@人員呢赃磨？那普通的輸入框肯定就不好實現(xiàn)了瞬浓，但是富文本編輯器是可以的惠遏，所以選用了富文本的編輯器；
- 文本框編輯完成拄养，@人員也寫好了离斩，以何種格式傳給后端，后端去實現(xiàn)選中人員的推送瘪匿？以及內(nèi)容發(fā)布成功之后跛梗，前端對特殊的@人員的展示問題呢？
帶著這樣的問題棋弥，我們開始：
- 文本框選用富文本的編輯器核偿；
- 前后端溝通，協(xié)商出一個所需要的一個數(shù)據(jù)文本結(jié)構顽染。我們這邊是 協(xié)商的是宪祥，數(shù)據(jù)at 人員的列表聂薪，列表的數(shù)據(jù)里面包含at 人員的id , <at> 標簽，然后其他的比如我自己需要的 @人員的文字的位置蝗羊，名字等其他字段。<at>特殊的標簽仁锯，標簽里面的參數(shù)耀找，數(shù)據(jù)都在發(fā)布的時候傳給到后端 類似于 “<at open_id="
{item.userId}">${nameNew}</at>” 這樣的方式；
- 那既然這樣业崖，那就可以開始嘗試如何@人員野芒；
- quill編輯器里面有一種方法 可以監(jiān)聽輸入文本的內(nèi)容： this.quillEdit.on('text-change', (delta, oldDelta, source) => {})可以監(jiān)聽@ 然后可以去喚起咱們所需要選擇的人員選擇器列表；
- 人員選擇双炕，如何將人員要帶到輸入框里面呢狞悲？同時還要將文字變成自己想要的顏色？ 經(jīng)過大量的嘗試和參考文檔妇斤，發(fā)現(xiàn)了有幾個方法insertText摇锋， formatText，removeFormat站超，setSelection荸恕；
@人員添加到輸入框
這樣就很優(yōu)秀了嘛！
- 在添加每一個人員的同時死相，需要記錄添加的人員的一些數(shù)據(jù)融求； 主要數(shù)據(jù)包括： 1）選中的人的文字個數(shù)字段：所添加的人的文字字數(shù)+@（后面用來刪除用）； 2）@這個人員在文本中的文字的位置字段算撮，同時這個字段在用戶從前面插入文字的時候需要同時更新這個字段生宛。（也是用于后面刪除用的） 3）選中人員的 id;
- <at>標簽 5） 將上面的這些數(shù)據(jù) 在發(fā)布的時候可傳入到后端。
-
添加上了之后肮柜，那刪除要怎樣呢陷舅？
刪除時
- 可以添加，可以刪除素挽，那剩下的工作就是要數(shù)據(jù)處理了蔑赘。
- 提交數(shù)據(jù)給后端，前端發(fā)布展示的時候 可以根據(jù)at 的標簽 去正則匹配 換成可展示的名字
- 提幾個注意的點： 1）在手機上富文本編輯器预明，如果在@的時候文本正好換行了缩赛，監(jiān)聽的時候可能需要監(jiān)聽'@\n'； 2）一些文案復制粘貼過來的時候撰糠，可能需要特殊處理酥馍； 3）@人員時候 在名字中間再次@的時候的問題； 4）刪除時候需要一些特殊處理
時間有限阅酪，文章寫的有點偏口語化旨袒，之后有時間會再整理一下汁针。
需要源文件請私我
