84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
这个是畅言的评论系统看到的
点了个发怒, 就会看到 [/发怒]
然后看到输出的是背景图来的。然后靠 background-position去定位
我想知道的是前端是如何解析 [/发怒] ??
第二、 前端发送给后端不需要处理吗? 直接发送 [/发怒] ?
首先,其实这个不需要前端解析。你可以审查一下编辑器(如下图)这些表情符号的代码,应该也是有类似title="发怒"的属性值的。前端在点击这些图标时,直接把图标元素对应的title拼接成[/...]格式的字符串,写到了文本编辑框里面去了。
title="发怒"
title
[/...]
第二,前端发送给后端不需要处理,直接发送[/发怒]。
[/发怒]
第三,当获取别人评论(也就是说不在编辑框里面而在评论列表中),后端提供给前端的数据就是类似评论评论[/发怒][/发怒]这样的纯文本,由前端将[/...]格式的文本再替换为你看到的以图片为背景的表情标签。
评论评论[/发怒][/发怒]
首先,其实这个不需要前端解析。你可以审查一下编辑器(如下图)这些表情符号的代码,应该也是有类似
title="发怒"
的属性值的。前端在点击这些图标时,直接把图标元素对应的title
拼接成[/...]
格式的字符串,写到了文本编辑框里面去了。第二,前端发送给后端不需要处理,直接发送
[/发怒]
。第三,当获取别人评论(也就是说不在编辑框里面而在评论列表中),后端提供给前端的数据就是类似
评论评论[/发怒][/发怒]
这样的纯文本,由前端将[/...]
格式的文本再替换为你看到的以图片为背景的表情标签。