富文本内容如何存储和页面回显

最新推荐文章于 2024-05-29 10:28:16 发布

抠脚码农

最新推荐文章于 2024-05-29 10:28:16 发布

阅读量2.5w

点赞数 13

分类专栏：大前端文章标签：富文本编辑器富文本内容存储富文本内容回显富文本内容前后端交互

本文链接：https://blog.csdn.net/wry7162416/article/details/101083527

版权

大前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

富文本用于很多场景，内容包括文本、粗体文字、变色文本、图片等。如下图所示：
在这里插入图片描述
这些富文本内容是如何存储到后端，又是如何从后端获取原样展示到页面上的呢？
具体交互流程如下：

前端通过富文本编辑器生成富文本内容
将富文本内容发送到后端进行存储
前端获取富文本内容，进行页面展示

富文本内容： 这里的富文本内容其实就是含有标签的字符串，比如图中的这些富文本内容就是类似以下字符串：

普通文字、<b>粗体文字</b> 、<s>删除线文字</s> 、<span style="color: red;">变色文字1</span><img style="width: 100px;height: 100px;" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1022109268,3759531978&fm=26&gp=0.jpg"  />

存储的时候将这些带有html标签的字符串整体存储，前端获取的时候同样返回

前端如何展示： (直接上代码)

<!DOCTYPE html>
<html>
   <head>
   	<meta charset="utf-8">
   	<title></title>
   </head>
   <body>
   	<div id="t"></div>
   	
   </body>
   
   <script>
   	// js 页面加载完成时自动执行该js
   	window.onload = function(){
   		var s = '普通文字、<b>粗体文字</b> 、<s>删除线文字</s> 、<span style="color: red;">变色文字1</span><img style="width: 100px;height: 100px;" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1022109268,3759531978&fm=26&gp=0.jpg"  />';
   		var t = document.getElementById('t');
   		// 重点：将字符串解析成html进行展示
   		t.innerHTML = s;
   		// 当做普通字符串
   		// t.textContent = s;
   	}
   </script>
</html>

页面效果如下：

t.innerHTML = s;执行效果

在这里插入图片描述

t.textContent = s;执行效果

从上图效果我们可以看到，innerHTML将普通字符串当做html运行，这样就将富文本内容正确的展示出来了。

其他： 对于不同的前端框架，有不同的api对应该操作：

	// jQuery
	$('t').html(s);
	
	// Vue (标签中使用，js中使用同原生js或jQuery)
	v-html=s
	
	// Thymeleaf (标签中使用，js中使用同原生js或jQuery)
	th:utext="${s}"

	......其他

抠脚码农

关注

13
点赞
踩
55

收藏

觉得还不错? 一键收藏
2
评论
富文本内容如何存储和页面回显

富文本用于很多场景，内容包括文本、粗体文字、变色文本、图片等。如下图所示：这些富文本内容是如何存储到后端，又是如何从后端获取原样展示到页面上的呢？具体交互流程如下：前端通过富文本编辑器生成富文本内容将富文本内容发送到后端进行存储前端获取富文本内容，进行页面展示富文本内容：这里的富文本内容其实就是含有标签的字符串，比如图中的这些富文本内容就是类似以下字符串：普通文字、<b...
复制链接

扫一扫

专栏目录