Dies wurde von Changyans Kommentarsystem gesehen
Klicken Sie auf Angry und Sie sehen [/ Angry]
Dann sehen Sie, dass die Ausgabe vom Hintergrundbild stammt. Dann verlassen Sie sich bei der Positionierung auf die Hintergrundposition
Was ich wissen möchte ist, wie das Frontend [/angry] analysiert? ?
Zweitens: Sendet das Front-End es ohne Verarbeitung an das Back-End? Direkt senden[/wütend]?
首先,其实这个不需要前端解析。你可以审查一下编辑器(如下图)这些表情符号的代码,应该也是有类似
title="发怒"
的属性值的。前端在点击这些图标时,直接把图标元素对应的title
拼接成[/...]
格式的字符串,写到了文本编辑框里面去了。第二,前端发送给后端不需要处理,直接发送
[/发怒]
。第三,当获取别人评论(也就是说不在编辑框里面而在评论列表中),后端提供给前端的数据就是类似
评论评论[/发怒][/发怒]
这样的纯文本,由前端将[/...]
格式的文本再替换为你看到的<span ... title="发怒" class="face-item ..."></span>
以图片为背景的表情标签。