富文本数据存储及回显

开发者应该都使用过富文本编辑器插件吧,对于富文本插件编辑的内容我们需要怎么存储及回显呢,我来简单介绍下。

存储:1、文件存储,将富文本数据保存成html文件,然后将文件上传到文件服务器;2、直接将html内容存储到数据库中。这篇主要介绍第二种。

第一步:获取富文本编辑器内容,我这里就手动编写了一段很小的html数据。

一个图片标签,里面放着一个图片链接,html里面双引号被转义了,会与字符串双引号冲突,使用spring mvc一般不需要手动转义,框架会帮我们处理。

第二步:处理特殊标签,我使用的是mysql数据库,像尖括号这种特殊表会被数据库误会,也是为了防止被人恶意在html内容中嵌入脚本代码。

富文本数据存储及回显_第1张图片

这里使用的是org.springframework.web.util.HtmlUtils这个工具类,属于Springboot web包里。

其中htmlEscapeHex方法是将所有特殊字符转义为对应的数字以十六进制格式引用,htmlEscape方法是将所有特殊字符转义到对应的本质引用,htmlEscapeDecimal方法是将所有特殊字符以十进制格式转义到对应的数字引用。具体是什么样子的呢,来看下控制台结果。

第三步,存储,一般富文本内容都是很大的,所以对应数据库字段我们应该选用longtext类型,如果选用varchar这些有长度的字段,可能会报data too long错误。

第四步,读取。

第五步,解析,使用的也是HtmlUtils这个工具类中的解析方法。

富文本数据存储及回显_第2张图片

解析只需要使用到一个htmlUnescape方法。

可以看到控制台结果,完美解析。将解析后的html内容返回到前端,回显到富文本框里面就行了。

欢迎指正或者提出更好的建议。

你可能感兴趣的:(spring-boot,Java,前端,MySQL)