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

文章目录概述获取富文本编辑器内容后端数据处理概述在所有的编辑器中，大概最受欢迎的就是富文本编辑器和MarkDown编辑器了，无论哪一种编辑器，我们需要知道的是，发给后端的内容是带着html标签的字符串，而我们需要把这些字符串存储到数据库中，其实原理非常简单，为了便于理解，我们首先创建一张表：CREATE TABLE `tb_title` (`title_id` int(11) NOT NULL C

hkk666123

10075人浏览 · 2021-02-04 16:48:34

hkk666123 · 2021-02-04 16:48:34 发布

文章目录

概述

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

一门面向 Data 和 AI 的低代码、云原生的开源编程语言

无需安装部署，在线快速体验 Byzer

更多推荐

byzer plugin install log

Byzer 白泽

函数实现越通用越好？来看看 Byzer-LLM 的 Function Implementation 带来的编程思想大变化...

前言Function Calling 是 OpenAI 首先提出来的一个非常有用的功能，实现了大模型对函数的调用能力。Byzer-LLM 给开源模型也带来了 Function Calling 实现。在这个基础上，我们还拓展了 Respond With Class 功能，允许大模型输出标准的Python对象，进步控制了大模型的输出能力。这两个能力参看：给开源大模型带来Function Callin.