富文本编辑器内容存储至Mysql，数据表如何设计？

最新推荐文章于 2024-04-24 15:57:45 发布

南丘xf

最新推荐文章于 2024-04-24 15:57:45 发布

阅读量4.5w

点赞数 32

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_39309402/article/details/101215388

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在所有的编辑器中，大概最受欢迎的就是富文本编辑器和MarkDown编辑器了，无论哪一种编辑器，我们需要知道的是，发给后端的内容是带着html标签的字符串，而我们需要把这些字符串存储到数据库中，其实原理非常简单，并没有多复杂，恰好一个新来的同事问到这个问题，就简单做一个Demo，便于理解，我们首先创建一张表：

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端传过来的内容，打开如下链接：
https://www.layui.com/demo/layedit.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>

那么，问题就来了，该同事实在不理解为什么前端读取该段内容，就能按格式显示，我们建一个简单的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);

	}
}

南丘xf

关注

32
点赞
踩
133

收藏

觉得还不错? 一键收藏
14
评论
富文本编辑器内容存储至Mysql，数据表如何设计？

在所有的编辑器中，大概最受欢迎的就是富文本编辑器和MarkDown编辑器了，无论哪一种编辑器，我们需要知道的是，发给后端的内容是带着html标签的字符串，而我们需要把这些字符串存储到数据库中，其实原理非常简单，并没有多复杂，恰好一个新来的同事问到这个问题，就简单做一个Demo，便于理解，我们首先创建一张表：CREATE TABLE `tb_title` ( `title_id` int(...
复制链接

扫一扫