Rich Text Display
RichTextView
Applicable Scenarios
It is used to convert and display rich text data.
Basic Capabilities Description
The rich text display component supports rendering HTML. Inputting HTML in the component configuration area enables customized page display effects.
Extended Scenarios Description
When used in data list or data detail components, it can directly bind to rich text type fields to display rich text data in the data model.
Property Introduction
组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 说明 |
|---|
| 内容 | value | string | 更改富文本的展示内容，支持使用 HTML 语言进行富文本内容的编辑 示例："<div style='padding: 16px;'><img src=\"https://qcloudimg.tencent-cloud.cn/raw/48ebd7f71fa21aaea767be927c04eac2.svg\"> <h1 style=\"color:#0052D9;\">轻松搭建微信小程序和企业生产管理系统</h1> <h2>丰富组件轻松调用</h2> <h3>开箱即用的50+通用组件</h3> <p>包含表格、图表、表单、日历、数据容器、轮播图、视频等</p> <img width=\"200\" src=\"https://qcloudimg.tencent-cloud.cn/raw/0d5ed44bee636536ad803fd5d6e1d6f5.png\"> <h3>微信生态小组件直接调用</h3> <p>手机号、微信头像/昵称、客服等微信小组件直接调用</p> <img width=\"200\" src=\"https://qcloudimg.tencent-cloud.cn/raw/a6c6a641e2bcac0bb05820c893dd2ac2.png\"> <h2>快速搭建微信小程序和企业微信应用</h2> <p> 在微搭上即可完成注册、开发、调试、体验、发布等小程序开发生命周期的流程，并深度结合企业微信，快速搭建应用上架到企微工作台 </p> <h2>超级开放的数据连接能力</h2> <h3>轻松调用海量数据</h3> <p>支持连接主流数据库以及能通过API建立连接的任何数据，仅需简单的数据调用语句即可实现海量信息交互</p> <h3>集成微信开放生态</h3> <p>集成企业微信、微信支付、客服等微信生态开放能力，开发者可以直接对接，节省开发时间</p> <h2>灵活的定制化能力</h2> <h3>样式自定义</h3> <p>开发者可以自定义样式、组件和前后端逻辑，满足展示界面个性化需求</p> <h3>业务逻辑自定义</h3> <p>微搭支持通过多语言传统代码模式自定义前后端服务逻辑，满足复杂业务场景需求</p></div>" |
Event Introduction
无Limitation Description
Display content built with this feature may not work in mini programs. Please refer to the actual performance in the mini program.
Frequently Asked Questions
Why are images uploaded in rich text displaying abnormally?
To ensure the security of your resources, the rich text image upload plugin implements anti-leech protection. Images uploaded to cloud storage use the cloud protocol, preventing users from obtaining permanent addresses.
The rich text editing component and rich text display component internally convert private images using the cloud protocol by transforming private cloud://xxxx protocol addresses into standard http protocol addresses, and then display the images using the generated temporary access links.
Therefore, if the rich text contains images obtained through its built-in upload plugin:
- Copy the final displayed html code (the image validity period may have expired)
- Directly use the raw html code from the database (images remain in the original cloud protocol)
- When exporting via a template for installation, the html template data of rich text (including cloud protocol links) is exported, but the actual file data corresponding to the links is not exported simultaneously, resulting in the corresponding files being unavailable when images are displayed.
- or other operations that bypass hotlink protection logic, etc.
may cause images to display abnormally.
Users can also flexibly convert and use images with cloud protocol stored in the database. For implementation details, refer to Obtain temporary access links for cloud storage files.
Why are externally linked images displaying abnormally?
Many websites' images check the page source, possibly because anti-leech protection is enabled. When accessed directly, there is no referrer, but when used in your page, it verifies the page source to block access. You can try using other image resources or check the loading failure information in the F12 developer tools.
Which HTML nodes and attributes does rich text support?
Can the QR code in rich text be recognized and opened via long-press?
Since the rich-text component in mini programs blocks events on all nodes, long-press recognition to open QR codes is currently not supported.