哈希表博客 评论@好友功能实现

看了 爱你城的评论@功能 觉得很不错 于是觉得想在哈希表上 也实现一个类似的功能.

首先 找到了 一个 很好的jquery插件 at.js

演示效果2018-09-09 22-50-36屏幕截图.png

原评论框是 老王通过 textarea 实现的 但是textarea 不支持插入dom 于是按着老王的样式 改成一个p 增加了contenteditable属性 这样就灵活多了,但是坏处也来了,不能防止XSS攻击.

但是如果通过 后端对 评论内容进行html转义 那这样评论的效果也会被转义成字符串掉.

后来看到markdown的语法 想了一种解决办法:

当我们 每@一个用户的 at.js 会产生一个这样的dom节点

<span class="atwho-inserted" data-atwho-at-query="@" contenteditable="false"><span data-id="1">@user</span></span>

1.前端数据转义

参照markdown语法 

[img]htttp:www.haxibiao.com/logo.png

这样markdown 会通过js 生成 这样的 <img src="htttp:www.haxibiao.com/logo.png"/>dom节点

于是我就自己定义了一种格式 在提交评论的时候 通过前端对数据进行格式化 避免在后端被转义掉

2.后端数据提取

首先 我们会通过htmlentities函数 对提交的内容转义 然后在通过正则表达式解析出来 我们的数据 然后在替换成 html标签.

这样既防止了XSS 也可以保持@功能的正常 并且支持特殊字符的账号

2018-09-09 23-06-57屏幕截图.png

这样就实现了 @好友的功能  代码可能还存在一部分需要改善 下周会改进

notification 模块还没实现 争取在下周完善出来.

效果展示:

手机端

2018-09-09 23-10-46屏幕截图.png

Pc端:

2018-09-09 22-50-36屏幕截图.png

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容