富文本编辑器编辑后的文字如何保存到数据库?

<div id = "content1" hidden="hidden">

${content}

</div>

<div id = "content2">

</div>

<script type="text/javascript">

$(function() {

$("#content2").html($("#content1").text())

})

</script>

亲，那些富文本编辑器的api文档都有说明的，具体哪个你可以网上搜索参考，一般都是先先创建一个对象，然后调用它提供的某个方法或者属性就可以获取到里面的内容，一般是html代码，直接发送到后台保存到数据库就可以了

在接收富文本时，数据库接收含有图片内容，图片会自动转换为Base64编码保存到数据库，导数据库性能降低。

解决：在接收富文本内容时，将接收到的图片转换为文件上传到Minio(Minio具体使用可参考文档)，然后将base64编码替换为图片地址保存

用到的工具类

使用正则表达式提取接收内容的Base64编码工具类

import java.util.ArrayList

import java.util.List

import java.util.regex.Matcher

import java.util.regex.Pattern

public class ImgBaseUtil {

public static List<String>getImgStr(String htmlStr) {

List<String>list = new ArrayList<>()

String img = ""

Pattern p_image

Matcher m_image

// String regEx_img = "<img.*src=(.*?)[^>]*?>"//图片链接地址

String regEx_img = "<img.*src\\s*=\\s*(.*?)[^>]*?>"

p_image = Pattern.compile(regEx_img, Pattern.CASE_INSENSITIVE)

m_image = p_image.matcher(htmlStr)

while (m_image.find()) {

// 得到<img />数据

img = m_image.group()

// 匹配<img>中的src数据

Matcher m = Pattern.compile("src\\s*=\\s*\"?(.*?)(\"|>|\\s+)").matcher(img)

while (m.find()) {

list.add(m.group(1))

}

}

return list

}

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

将Base64编码转换为文件流的工具类

import org.springframework.web.multipart.MultipartFile

import sun.misc.BASE64Decoder

import java.io.*

public class BASE64DecodedMultipartFile implements MultipartFile {

private final byte[] imgContent

private final String header

public BASE64DecodedMultipartFile(byte[] imgContent, String header) {

this.imgContent = imgContent

this.header = header.split("")[0]

}

@Override

public String getName() {

return System.currentTimeMillis() + Math.random() + "." + header.split("/")[1]

}

@Override

public String getOriginalFilename() {

return System.currentTimeMillis() + (int) Math.random() * 10000 + "." + header.split("/")[1]

}

@Override

public String getContentType() {

return header.split(":")[1]

}

@Override

public boolean isEmpty() {

return imgContent == null || imgContent.length == 0

}

@Override

public long getSize() {

return imgContent.length

}

@Override

public byte[] getBytes() throws IOException {

return imgContent

}

@Override

public InputStream getInputStream() throws IOException {

return new ByteArrayInputStream(imgContent)

}

@Override

public void transferTo(File dest) throws IOException, IllegalStateException {

new FileOutputStream(dest).write(imgContent)

}

public static MultipartFile base64ToMultipart(String base64) {

try {

String[] baseStrs = base64.split(",")

BASE64Decoder decoder = new BASE64Decoder()

byte[] b = new byte[0]

b = decoder.decodeBuffer(baseStrs[1])

for (int i = 0i <b.length++i) {

if (b[i] <0) {

b[i] += 256

}

}

return new BASE64DecodedMultipartFile(b, baseStrs[0])

} catch (IOException e) {

e.printStackTrace()

return null

}

}

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

内容接收并完成处理工具类

public class RichTextUtil {

/**

*

* @param text 富文本内容

* @return 返回处理图片后的数据

*/

public String richText(String text,MinioUtils minioUtils,MinioConfig minioConfig){

String s=new String(text)

String result=null//返回结果

List<String>imgStr = ImgBaseUtil.getImgStr(s)//每组base64编码图片

if (imgStr.isEmpty()){

return text

}

for (String s1:imgStr){ //每个base64转换并上传

String s2= UUID.randomUUID().toString().replaceAll("-","")+".jpg"//新的文件链接

//上传

MultipartFile multipartFile = BASE64DecodedMultipartFile.base64ToMultipart(s1)

assert multipartFile != null

minioUtils.putObject1(multipartFile,minioConfig.getBucketName(),s2)

String foreverUrl=minioConfig.getEndpoint()+":"+minioConfig.getPort()+"/"+minioConfig.getBucketName()+"/"+s2//永久链接

if (Objects.isNull(result)){

result=s.replace(s1,foreverUrl)//第一次替换

}

result=result.replace(s1,foreverUrl)//前边替换过，继续替换

}

return result

}

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

配合Minio工具类使用

@GetMapping("/tss")

public String dmo(@RequestBody Entity entity) throws IOException {

String s=entity.getContent()//接收到的内容

RichTextUtil richTextUtil = new RichTextUtil()

String s1 = richTextUtil.richText(s,minioUtils,minioConfig)

entity.setContent(s1)//最后将转换过的内容替换就行

//数据库保存一下实体类内容

return entity

}

1

2

3

4

5

6

7

8

9

1

2

3

4

5

6

7

8

9

Minio使用可查询相关资料或了解本博客SpringBoot对Minio的简单使用链接: http://t.csdn.cn/IJA0G

文章知识点与官方知识档案匹配

Java技能树使用JDBC *** 作数据库数据库 *** 作

95211 人正在系统学习中

打开CSDN APP，看更多技术内容

...如D:\tmp)并回显_静静看大海的博客_java 富文本保存...

1、项目需求: 使用百度富文本编辑器实现“重要节假日高速出行指南内容”编辑,功能涉及图片、视频上传。 2、存在问题 百度富文本编辑器默认将图片、视频上传至项目里,如果使用Tomcat作为服务器的时候,如果不配置图片保存路径,将图片保存在项...

继续访问

java 保存富文本_如何从Web应用程序保存富文本并将其显示在富文本框中...

我建议d出打开的写字板(开始 - >运行... - >wordpad),并乱用不同的字体样式等 . 然后将其保存为某处的RTF文档 . 在您选择的纯文本编辑器中打开该文档(我使用Notepad++),这将帮助您更轻松地找出RTF . ...

继续访问

Bootstrap富文本组件wysiwyg数据保存到mysql的方法

Bootstrap提供了一个叫wysiwyg的富文本组件，用来显示和编辑富文本数据，但如何将编辑后的数据保存到MySQL数据库，却不得而知。另外，如何将mysql数据库中的数据显示到wysiwyg也不得而知，对于这两个问题，让我来告诉你解决方案！ 一、效果展示 首先，我们先来看看效果如何： 富文本中有一张图片，还有一个数字列表 我们可以看到编辑后的数据保存成功，以及保存后对应的展示。 二、富文本 度娘对于富文本的解释如下： 富文本格式（Rich Text Format, 一般简称为RTF）是由微软公司开发的跨平台文档格式。大多数的文字处理软件都能读取和保存RTF文档。RTF是Rich

富文本保存到数据库

标题 富文本保存到数据库 -idea String html = "<p wx:nodeid='135'>1.地方</p><p wx:nodeid='156'>2.第三方"// 前端传过来的富文本内容 String temp = HtmlUtils.htmlEscapeHex(html)System.err.println("存数据库=\r\n" + temp)resume.setExperience(temp)Strin

继续访问

java中使用poi如何导富文本,Apache的POI - 读取和存储DB富文本内容

Using your favorite Java-to-database framework (JDBC, Hibernate, etc.), store the String value into contents in rich_text_string, and the associated FormattingRun object data into rt_formatting_runs. ...

继续访问

富文本保存到数据库_黑潮之羽的博客_富文本保存到数据库

富文本保存到数据库 String html = "1.地方2.第三方"// 前端传过来的富文本内容 String temp = HtmlUtils.htmlEscapeHex(html)System.err.println("存数据库=\r\n" + temp)resume.setExperience(temp)String returnHt...

继续访问

java富文本

【代码】java富文本。

继续访问

富文本编辑器存MYSQL数据库

一、MYSQL数据库对应数据类型选用 longtest类型，对应java和mybatis框架类型为string。 二、富文本编辑器有特殊字符，存数据库会转义 在java代码中，添加org.springframework.web.util.HtmlUtils 包下的 HtmlUtils.htmlEscapeHex(String)；把html的特殊字符转换成符合Intel HEX文件的字符串 HtmlUtils.htmlUnescape(...

继续访问

Java开发之富文本编辑器TinyMCE

一、题外话 最近负责了一个cms网站的运维，里面存在很多和编辑器有关的问题，比如编辑一些新闻博客，论文模块。系统采用的是FCKEditor，自我感觉不是很好，如下图 特别是在用户想插入一个图片的话，就很麻烦，所有用户共享一个文件目录，这样就不好了，于是便想到了TinyMCE编辑器，博客园默认的也是这个编辑器，接下 来，我们开始吧 二、TinyMCE编辑器集成步骤 2.1：下载相关文件...

继续访问

Java实现多文件上传下载，kindeditor富文本保存为word文件,文件列表分页显示

介绍 SpringBoot+Thymeleaf+Mybaits项目部分功能， 实现文件的多文件上传和下载，以及将kindeditor富文本内容保存为.doc文件 文件上传/创建后以列表形式显示，并且可以分页显示 提示 简单记录，仅供参考，代码并不完整，需要简单修改后才能使用（没提供.css文件，需要删除html中的class；另外部分变量通过session获取，可以适当修改） 关键代码 html： <!DOCTYPE html><html lang="en" xmlns:th="http

继续访问

JAVA：富文本框截图，将图片的Base64转File文件进行保存

代码】JAVA：富文本框截图，将图片的Base64转File文件进行保存。

继续访问

java 富文本框内容 保存与恢复,将富文本框内容直接保存到文件中。（不使用savefile对话框）...

how can I save the contents of a rich text box without needing to open the save file dialog.i think its something like:richTextBox1.SaveFile(@"\Documents\save_file_here.rtf")but it cant find the file...

继续访问

java富文本编辑数据存储到数据库简单实现

java富文本编辑数据存储到数据库简单实现-小白日记 前端代码 <link rel="stylesheet" href="../themes/default/default.css" /><script charset="utf-8" src="../kindeditor-all.js"></script><script charset="utf-8" src="../lang/zh-CN.js"></script>...

继续访问

Java解析富文本

富文本Java解析

继续访问

java 关于处理富文本保存,查询,更新过慢问题

java 关于处理富文本保存,查询,更新过慢问题 首先了解为什么富文本保存,查询,更新会过慢 数据库富文本字段类型为：longtext 类型 假如富文本里面只保存文字的话,保存,查询,更新都会很快 注意：只有富文本里面插入图片或者视频的时候才会变的很慢–因为前端富文本组件会把图片或视频直接转化为base64编码,这样保存量数据就会变的极大！ 解决方案： 后端提供一个文件上传的接口,前端富文本要插入图片的时候直接调上传接口，先把图片或者视频上传到服务器，返回图片的url，前端把url直接放到 <im

继续访问

记一次富文本编辑器保存内容到数据库转换内容的问题

项目上要用到富文本编辑器，保存到数据库的时候它会自动转换成非HTML的格式，再次从数据库读取到页面后格式全乱了。如图：如果我们要按一开始我们输入的格式正常显示需要对保存的内容进行转换，转换成正常的HTML的格式方法是需要用到commons-lang3-3.3.2.jar 这个jar包下面的一个工具类String qualiHtml=StringEscapeUtils.unescapeHtml4(r...

继续访问

java 富文本 word_Java导出富文本到word

源码地址：背景最近用java开发一个中车项目管理系统，里面有一个维修单word导出功能。可用方案在网上查找资料，总结出两种比较可行的方案。(1) 制作word模板，导出成mht文件(单页面网页格式)，然后往模板里渲染数据，最终生成word文档。(2) 制作word模板，导出成xml文件，然后往模板里渲染数据，最终生成word文档。两种都是采用模板的思想，比用poi去组织word格式简单的很多很多。...

继续访问

191210P4 Java富文本编辑之图片链接本地化

Java富文本编辑之图片链接本地化 作者：邵发 官网：http://afanihao.cn/java 本文介绍在图文混编项目中（博客、新闻等），如何将富文本中的图片外链转为本地链接的问题。本文是Java学习指南系列教程的官方配套文档，项目源码在本文末尾说明。 所谓富文本Rich Text，就是以HTML形式表示的文本。在前端通常由富文本编辑器得到，比如UEditor，KindEditor，w...

继续访问

java 富文本框内容 保存与恢复_使用富文本编辑器保存数据后进行fastjson格式转换异常及序列化处理...

最近线上的ELK日志监控爆出几个异常问题，jsonException的解析问题。如下:message: 2019-04-10 23:37:43,952 ERROR aop.AspectAdvice eid=410724004 not match : - ,com.alibaba.fastjson.JSONException: not match : - , atcom.alibaba.fastjs...

继续访问

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

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

继续访问

富文本数据保存

原文：https://blog.csdn.net/qing_gee/article/details/49331543 Bootstrap提供了一个叫wysiwyg的富文本组件，用来显示和编辑富文本数据，但如何将编辑后的数据保存到mysql数据库，却不得而知。另外，如何将mysql数据库中的数据显示到wysiwyg也不得而知，对于这两个问题，让我来告诉你解决方案！ 一、效果展示 首先，我们先来看...

继续访问

最新发布 java 将富文本转化为word，保留原本格式

通过java，将富文本转化为word

继续访问

热门推荐 Bootstrap wysiwyg，将富文本数据保存到mysql

Bootstrap提供了一个叫[wysiwyg](http://www.bootcss.com/p/bootstrap-wysiwyg/)的富文本组件，用来显示和编辑富文本数据，但如何将编辑后的数据保存到mysql数据库，却不得而知

继续访问

java富文本框信息如何保存

java

开发语言

写评论

评论

10

3

踩

分享

---