闲言

以前vue展示HTML时候使用v-html就可以了，但是在 uniapp 中，部分可以展示，比如支付宝中就不行，在 uniapp中使用的是 “<rich-text>”，但是效果并不是很理想，有时候也不是很好。

<template><view class="content"><rich-text :nodes="content"></rich-text></view>
</template><script>export default {data() {return {content: '<h1 style=\"text-align:center;\">测<font color=\"#df0029\">试</font>的</h1><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;AV就阿斯卡纶极度分裂卡死的弗兰克几哈合适的的flk，大事发生的护发素可见到过浩丰科技a&nbsp;把的减肥卡接收到。</p><h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1、三大法师</h3><p>&nbsp; &nbsp;&nbsp;啥地方就暗示的父级撒的开<font color=\"#5bbd2b\">发阿双方均克拉斯的放哈SDK浪费as打开</font>了发货速度垮落法。大沙发安师大。</p>'}},methods: {}}
</script>

效果：

从效果上看，文字的颜色样式没有生效，因为第一次接触，还是一边写一边学的样子，看了文档，似乎是说推荐将 HTML String 转化为 nodes 数组，可使用 html-parser 转换。

度了下，准备使用 mp-html 。

安装 mp-html

npm install mp-html

在使用的页面中

<template><view class="content"><!-- 1、展示的 --><mp-html :content="content" /></view>
</template><script>// 2、导入import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'export default {// 3、这里不能省略components: {mpHtml},data() {return {content: '<h1 style=\"text-align:center;\">测<font color=\"#df0029\">试</font>的</h1><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;AV就阿斯卡纶极度分裂卡死的弗兰克几哈合适的的flk，大事发生的护发素可见到过浩丰科技a&nbsp;把的减肥卡接收到。</p><h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1、三大法师</h3><p>&nbsp; &nbsp;&nbsp;啥地方就暗示的父级撒的开<font color=\"#5bbd2b\">发阿双方均克拉斯的放哈SDK浪费as打开</font>了发货速度垮落法。大沙发安师大。</p>'}},methods: {}}
</script><style>.content {border: 1px solid #4e83ff;border-radius: 15px;width: 95%;height: 600rpx;margin: 0 auto;margin-top: 10rpx;}
</style>

可以看到效果起作用了。

uniapp展示富文本相关推荐

若依前后端分离发布富文本框内容 | uni-app微信小程序展示富文本框内容
微信小程序端引入富文本样式富文本提交图片json error 一.展示示例: 1.PC端前端发布界面可以设置文字大小,居中,可以插入图片,设置图片大小,居中. 2.小程序端展示二.基于若依框架踩 ...
uniapp显示富文本效果demo（整理）
uniapp显示富文本: <template><view class="rtfBox"><view class="margin-left30 ...
uniapp 对富文本中的图片预览及长按图片识别二维码/保存图片
uniapp 对富文本中的图片预览及长按图片识别二维码/保存图片富文本一定要使用uniapp提供的<rich-text>标签,不要使用 v-html 因为<rich-text> ...
如何展示富文本_自助建站如何做出个性化效果？
自助建站是当前很流行的建站方式,非常适合什么技术也不懂的小白,只需选一个自助建站模板,再稍加编辑就能快速生成自己的网站.很多人会以为,自助建站受限制太多,无法做出个性化定制效果,然而事实真是这样吗?其 ...
微信小程序解析并展示富文本编辑器保存后的内容
最近有个产品需求:在PC端里用富文本编辑器里编写自定义内容,然后保存后需要在小程序端展示,了解过的朋友就知道了,富文本编辑器输出的内容都是基于HTML标签的,比如:div.p.br这些常用的,而小程序 ...
android如何展示富文本_android高仿今日头条富文本编辑(发布文章)
前言: 在经历了几个月的项目期限.我们遇到了前端发布文章,要用到富文本编辑的功能.在一番衡量下最终用到了richeditor-android第三方框架.实现原理就是通过webView和js实现前端富文 ...
uni-app 修改富文本信息中的图片样式
获取到富文本信息: 用正则表达式定位要修改的部分,替换要修改成的文本内容. var richtext= res.data.data.richtext;const regex = new RegExp( ...
html缩略文本,列表中展示富文本的缩略内容
列表中显示富文本的缩略内容业务中有一个一览列表,显示某个对象的一览信息.列表的其中一列用来显示对象的内容的缩略显示,该内容是含有各种html标签的富文本内容.开始决定不做处理直接显示,但看到一个一个 ...
uni-app 解决富文本图片溢出问题
解决前在js中获取后台的富文本数据后,使用 replace 设置图片的宽度为100% <template><view class="container"> ...

uniapp展示富文本

uniapp展示富文本

闲言

安装 mp-html

uniapp展示富文本相关推荐

最新文章

热门文章