DCloud_heavensoft
DCloud_heavensoft
  • 发布:2019-04-08 04:42
  • 更新:2024-01-24 10:21
  • 阅读:63176

富文本/渲染/显示/图文混排方案。rich-text、uparse、v-html的区别

分类:uni-app

图文混排的界面,常见于新闻、帖子的详情页渲染。
由于小程序端的限制,uni-app的富文本的处理与普通网页不同。
有rich-text组件、v-html、和uParse三类方案。

1. rich-text

rich-text是uni-app的内置组件,提供了高性能的富文本渲染模式。
API参考https://uniapp.dcloud.io/component/rich-text
rich-text的优势是全端支持、高性能。有个缺陷是只能整体设点击事情,无法对富文本中的图片、超链接单独设点击事件。
如果是图片,可以把内容拆成多个rich-text解决。rich-text不支持内嵌视频也可以通过拆分多个rich-text,中间插入video来实现。
注:h5和app-nvue无此限制,支持链接等单独点击。

2. v-html

v-html指令,是web开发中很常用的。可惜由于小程序不支持html,使用场景受限。
在uni-app中,h5端和app-vue的v3编译器下可以使用v-html。其他环境无法支持。

3. uParse

由于小程序的rich-text组件在一些场景不满足需求,于是业内出现了wxparse等三方方案,把HTML或markdown格式的服务器数据源转为view来渲染。
但wxparse许久不更新,且不跨端,在uni-app插件市场出现了更多改进版的parse插件。
它们功能更强,支持直接渲染markdown或html的数据源为富文本,也支持其中的图片和超链接的点击处理,有的还支持表格和视频的处理。
但这些parser解决方案的性能不如rich-text。

注:app-nvue只能使用rich-text。

几种方案的特点讲清楚了,大家在开发中根据自己的需求选择合适的富文本渲染方案吧。

至于富文本编辑,即在输入框里图文混排内容,解决方案如下:

  • 在h5、app-vue、微信小程序,支持editor组件
  • 在h5中,传统的富文本编辑仍可使用
  • 在非微信的其他小程序中,其官方没有提供解决方案,目前只能使用web-view组件套一个远程网页来满足这方面的需求。web-view组件是全端可用的解决方案。
  • 还有一种方案,不再编辑区直接预览效果,而是采用markdown编辑器方案,输入区输入markdown语法,预览区提供预览。这种方案是跨端的。插件市场搜富文本编辑,有不少插件。http://ext.dcloud.net.cn/search?q=%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91
5 关注 分享
1***@qq.com sonicsunsky 1***@qq.com 李宣导 冬未至

要回复文章请先登录注册

风云杭州

风云杭州

回复 小朱葛 :
nvue下的 rich-text 感觉坑挺多
2020-05-21 22:15
风云杭州

风云杭州

回复 uniapp棒棒的 :
最好服务器端就处理好,用html-parse 插件
2020-05-21 22:14
风云杭州

风云杭州

回复 Rudy001 :
我也想知道
2020-05-21 22:11
风云杭州

风云杭州

回复 xiaoliao998 :
就算设置了宽高,还是要解决不同手机屏幕适配的问题。貌似rich-text里的img 对rpx 并不支持
2020-05-21 22:10
小罗同学

小罗同学

回复 Rudy001 :
我也有这个需求~
2020-04-23 15:46
xiaoliao998

xiaoliao998

怎么nvue页面解析富文本那么累,这个image必须设置宽高,简直就是灾难,这该如何是好
2020-03-09 23:02
Rudy001

Rudy001

图文混合的html数据,怎么做点击内容里的图片放大预览?
2020-02-03 16:03
弄月

弄月

https://ext.dcloud.net.cn/plugin?id=805 这个富文本解析插件才是最强的,碾压rich-text,无论功能还是文档
https://jin-yufeng.github.io/Parser/#/
2020-01-22 10:03
DCloud_heavensoft

DCloud_heavensoft (作者)

回复 小朱葛 :
官方近期会升级app端vue页面的富文本解决方案,请关注近期更新
2019-11-20 16:44
小朱葛

小朱葛

回复 DCloud_heavensoft :
看过了,链接是可以点击,但是是跳转默认的浏览器的,并不能跳转到我指定的webview中。我在实际使用的过程中,安卓端的richtext 有很多问题,请看这里 https://ask.dcloud.net.cn/question/82530?notification_id-644803__rf-false__item_id-104751__answer_id-104751__single-TRUE#!answer_104751
2019-11-20 09:44