富文本编辑器内容存储至Mysql

文章目录

- 概述
- 获取富文本编辑器内容
- 后端数据处理

概述

在所有的编辑器中，大概最受欢迎的就是富文本编辑器和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);
  }
}

更多推荐

富文本编辑器内容存储至Mysql