84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
這個是暢言的評論系統看到的
點了個發怒, 就會看到 [/發怒]
#然後看到輸出的是背景圖來的。然後靠 background-position去定位
#我想知道的是前端是如何解析 [/發怒] ? ?
第二、 前端發送給後端不需要處理嗎?直接發送 [/發怒] ?
首先,其實這個不需要前端解析。你可以審查一下編輯器(如下圖)這些表情符號的程式碼,應該也是有類似title="發怒"的屬性值的。前端在點選這些圖示時,直接把圖示元素對應的title拼接成[/...]格式的字串,寫到了文字編輯框裡面去了。
title="發怒"
title
[/...]
第二,前端發送給後端不需要處理,直接發送[/發怒]。
[/發怒]
第三,當獲取別人評論(也就是說不在編輯框裡面而在評論列表中),後端提供給前端的數據就是類似評論評論[/發怒][/發怒]這樣的純文本,由前端將[/...]格式的文字再替換為你看到的以圖片為背景的表情標籤。
評論評論[/發怒][/發怒]
首先,其實這個不需要前端解析。你可以審查一下編輯器(如下圖)這些表情符號的程式碼,應該也是有類似
title="發怒"
的屬性值的。前端在點選這些圖示時,直接把圖示元素對應的title
拼接成[/...]
格式的字串,寫到了文字編輯框裡面去了。第二,前端發送給後端不需要處理,直接發送
[/發怒]
。第三,當獲取別人評論(也就是說不在編輯框裡面而在評論列表中),後端提供給前端的數據就是類似
評論評論[/發怒][/發怒]
這樣的純文本,由前端將[/...]
格式的文字再替換為你看到的以圖片為背景的表情標籤。