rich-text、uparse、v-html的区别
图文混排的界面,常见于新闻、帖子的详情页渲染。 由于小程序端的限制,uni-app
的富文本的处理与普通网页不同。 有rich-text
组件、v-html
、和uParse
三类方案。
rich-text
rich-text
是uni-app
的内置组件,提供了高性能的富文本渲染模式。API
参考https://uniapp.dcloud.io/component/rich-textrich-text
的优势是全端支持、高性能。有个缺陷是只能整体设点击事情,无法对富文本中的图片、超链接单独设点击事件。
如果是图片,可以把内容拆成多个rich-text
解决。rich-text
不支持内嵌视频也可以通过拆分多个rich-text
,中间插入video
来实现。
注:h5
和app-nvue
无此限制,支持链接等单独点击。
v-html
v-html
指令,是web
开发中很常用的。可惜由于小程序不支持html
,使用场景受限。
在uni-app
中,h5
端和app-vue
的v3
编译器下可以使用v-html
。其他环境无法支持。
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
语法,预览区提供预览。这种方案是跨端的。插件市场搜富文本编辑,有不少插件。https://ext.dcloud.net.cn/search?q=%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91
文章来源:
作者:喜欢桉树叶
链接:https://www.jianshu.com/p/15185bc092dc
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。