textarea输入的内容保存到数据库,用div显示

背景:在近期的项目中,有这样一个需求:用户的个人简介,前台无刷新编辑。那么这个问题是不难的,实现方式:

1.可编辑的div

2.ajax请求保存div中输入的内容

到这里我相信很多朋友都是一目了然,这并不是很难的啊,

但是问题来了,项目需求,用户在填写个人简介的时候,输入的换行也要相应的保存起来,于是宝宝查看了下可编辑的div输入换行之后是什么格式,

宝宝发现,当你按一次回车,输入内容之后,html会自动给你生成一个div,那么你按了回车之后输入的内容都会放到这块div中,这个时候宝宝是很开心的,

妈蛋啊,直接保存可编辑div的html到数据库,显示的时候不加任何处理,直接显示html,该有的换行都有,原来什么样子就是什么样子啊(这样保存html的方式还可以避免脚本注入的问题)。

那么到了这里,我觉得很多人都会认为,这个问题已经解决了,但是万万没想到,故事一波三折,个人简介允许1000字符,超过三行需要截取三行,然后用“...查看全部”代替,这个时候,项目组使用了一个吊死级别的插件,dotdotdot.js插件,这个插件差点要了宝宝半条名,(我要吐槽一下:真的是他妈的八字的插件啊),以往不专业的截取字符串,都会用subString等函数截取,但是事实上是不合理的,(窗口缩小等情况会出现问题),而这款插件(或者类似插件)都是根据div的高度截取,你需要三行(如果三行高度是84px),那么他会给你截取高度是84px,超出部分隐藏,宝宝不明白它内在的截取方式,总之出现了很多问题。


后来项目组的某些老人,想不出法子,便让宝宝用textarea代替可编辑div用来编辑,编辑完成依然用div显示。

OK

这篇文章的重点来了:

textarea内容保存到数据库,然后从数据库取出来用div显示

1. 前台获取textarea的value值

2. 把value值传到后台,对特殊字符进行处理,php为例:htmlspecialchars(value)

3. 把经过特殊字符处理之后的value保存到数据库。(为什么要进行特殊字符处理? 避免脚本注入等问题啊!)

4. 存到数据库的value拿出来,以html的方式显示,是可以,但是他的换行没了,据说是保存到数据库的时候,换行‘\n’变成了空格

5. 那么显示的时候该如何把换行找回来呢? php函数nl2br(value)

6. ok,完成了,这样拿到的数据可以直接在html中显示,也会包括换行,也防止了脚本注入


你可能感兴趣的:(textarea输入的内容保存到数据库,用div显示)