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

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

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

普通文字、<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}"

	......其他
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign