文章目录
- 概述
- 获取富文本编辑器内容
- 后端数据处理
概述
在所有的编辑器中，大概最受欢迎的就是富文本编辑器和MarkDown编辑器了，无论哪一种编辑器，我们需要知道的是，发给后端的内容是带着html标签的字符串，而我们需要把这些字符串存储到数据库中，其实原理非常简单，为了便于理解，我们首先创建一张表：
CREATE TABLE `tb_title` (`title_id` int(11) NOT NULL COMMENT '文章Id',`sort_id` int(11) DEFAULT NULL COMMENT '所属栏目Id',`title` varchar(200) DEFAULT NULL COMMENT '标题',`content` longtext COMMENT ' 内容',`create_time` date DEFAULT NULL COMMENT '创建时间',`update_time` date DEFAULT NULL COMMENT '修改时间',`title_status` int(11) DEFAULT NULL COMMENT '文章状态',PRIMARY KEY (`title_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
PS:需要注意的是，内容一定选longtext类型，以免报长度不够错误。
获取富文本编辑器内容
接下来，我们模拟一段web端传过来的内容，请点击layui进行模拟：
点击获取编辑器内容，我们就可拿到该段字符串：
<p><b>1、什么是Vue?</b></p><p>vue真的太好用了，是前后段分离必不可少的开发框架之一……</p><p><br></p><p><i><u>2、Vue能干什么？</u></i></p><p>模拟数据</p><p><br></p>
那么，问题就来了，该同事实在不理解为什么前端读取该段内容，就能按上图格式展示。我们建一个简单的html，并把该段内容放在div标签中，用浏览器打开：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Insert title here</title>
</head>
<body><div><p><b>1、什么是Vue?</b></p><p>vue真的太好用了，是前后段分离必不可少的开发框架之一……</p><p><br></p><p><i><u>2、Vue能干什么？</u></i></p><p>模拟数据</p><p><br></p></div>
</body>
</html>
双击，可以发现，正常按照格式显示（其实这东西并不难理解，div显示块，浏览器会自动编译html）：
后端数据处理
在实际编程中，我们需要把html的标签特殊字符转换成普通字符，用的时候再转出来，主要用以下工具类：
public class TestFuWenBen {public static void main(String[] args) {String html = "<p><b>1、什么是Vue?</b></p><p>vue真的太好用了，是前后段分离必不可少的开发框架之一……</p><p><br></p><p><i><u>2、Vue能干什么？</u></i></p><p>模拟数据</p><p><br></p>"; // 前端传过来的富文本内容String temp = HtmlUtils.htmlEscapeHex(html);System.err.println("存数据库=\r\n" + temp);String returnHtml = HtmlUtils.htmlUnescape(temp);System.out.println("回调===\r\n" + returnHtml);}
}
