富⽂本内容如何存储和页⾯回显
富⽂本⽤于很多场景，内容包括⽂本、粗体⽂字、变⾊⽂本、图⽚等。如下图所⽰：
这些富⽂本内容是如何存储到后端，⼜是如何从后端获取原样展⽰到页⾯上的呢？
具体交互流程如下：
前端通过富⽂本编辑器⽣成富⽂本内容
将富⽂本内容发送到后端进⾏存储
前端获取富⽂本内容，进⾏页⾯展⽰
富⽂本内容： 这⾥的富⽂本内容其实就是含有标签的字符串，⽐如图中的这些富⽂本内容就是类似以下字符串：
普通⽂字、<b>粗体⽂字</b>、<s>删除线⽂字</s>、<span >变⾊⽂字1</span><img src="ss0.b dstatic/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1022109268,3759531978&fm=26&gp=0.jpg"/>原生js和js的区别
存储的时候将这些带有html标签的字符串整体存储，前端获取的时候同样返回
前端如何展⽰： (直接上代码)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="t"></div>
</body>
<script>
// js 页⾯加载完成时⾃动执⾏该js
var s ='普通⽂字、<b>粗体⽂字</b> 、<s>删除线⽂字</s> 、<span >变⾊⽂字1</span><img src=" ss0.bdstatic/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1022109268,3759531978&fm=26&gp=0.jpg"  />';
var t = ElementById('t');
// 重点：将字符串解析成html进⾏展⽰
t.innerHTML = s;
// 当做普通字符串
// t.textContent = s;
}
</script>
</html>
页⾯效果如下：
t.innerHTML = s；执⾏效果
从上图效果我们可以看到，innerHTML将普通字符串当做html运⾏，这样就将富⽂本内容正确的展⽰出来了。其他： 对于不同的前端框架，有不同的api对应该操作：
// jQuery
$('t').html(s);
// Vue (标签中使⽤，js中使⽤同原⽣js或jQuery)
v-html=s
// Thymeleaf (标签中使⽤，js中使⽤同原⽣js或jQuery)
th:utext="${s}"
......其他

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。