富文本数据存储及回显

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

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

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

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

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

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

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

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

第四步，读取。

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

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

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

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

富文本数据存储及回显相关推荐

富文本编辑器mavon-editor文章回显
继上篇安装使用mavon-editor,本篇讲述文章回显问题使用富文本编辑器就是为了实现发布帮助文档和公告新闻类的编辑功能,文章编辑完毕自然要在页面中展示出来.文章的排版和样式自然要同在编辑器中的一 ...
文本数据增强之回译数据增强
文章目录题目回译数据增强法回译数据增强优势回译数据增强存在的问题前言单句翻译代码运行结果1 数组翻译法代码运行结果2 回译回译结果题目 ''' Description: 文本数据增 ...
带有富文本数据如何导出word文档（使用mht模板）
一.制作mht模板使用word(不能用wps)制作好导出后想要的样子,并使用占位符填充,例如${NAME},设置好格式,另存为.mht格式的文件.之后用文本编辑器打开(我用的notepad++),检 ...
layui table数据修改的回显
实现的样式给你们看一波点击这锅按钮其实回显就是一个赋值的操作,先把form表单的那些input 框的id拿到,在展示成功的那里进行绑值 table.on('tool(test)', functio ...
微信小程序开发加载html富文本数据
最近项目上遇到在微信小程序里需要显示新闻内容,新闻内容是通过接口读取的服务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过w ...
【微信小程序】无法解析京东商城商品详情富文本数据
小程序的rich-text富文本标签不支持link标签,这就导致我们从京东商城拿到的商品详情富文本无法解析. rich-text组件用法小程序商城对接京东商城商品,拿到的京东商品详情的富文本数据格式 ...
【Java 后端接收前端的富文本数据，其中标签样式数据丢失解决】
[问题处理记录] 问题前端json字符串传值富文本格式的字段给我,字符串参数如下: "<p data-we-empty-p="" style="text ...
vue项目对要显示的富文本数据中的图片处理----去掉或控制图片大小
一.去掉图片标签 let informationArticle = informationArticle.replace(/<\/?(img)[^>]*>/gi, ''); 利用正则 ...
富文本数据只展示文字，前端必知
先看原始效果,我这里是用了v-html展示内容,如果是v-text则会直接显示源码(请看下面的代码). 但是这样就会出现一个问题,内容样式很突兀(主要为字体).因此我就想要,富文本数据源码格式只展示文 ...

富文本数据存储及回显

富文本数据存储及回显相关推荐

最新文章

热门文章