Rich Text Display

RichTextView

Applicable Scenarios

Used for converting and displaying rich text type data.

Basic Capabilities Description

The rich text display component supports rendering html. By inputting html in the component configuration area, customized page display effects can be achieved.

Extended Scenarios Description

When used in data list and data detail components, it can be directly bound to rich text type fields to display rich text data in the data model.

Property Introduction

External properties received by the component

Property Name	Property Identifier	Type	Description

Content

value

string

Modify rich text display content, supports using HTML language to edit rich text content Example: "<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

None

Limits Description

The display content built through this feature may not work properly in Mini Programs. Please refer to the actual runtime performance of the Mini Program.

Frequently Asked Questions

Why do uploaded images in rich text display abnormally?

To ensure the security of your resources, the rich text image upload plugin has implemented hotlink protection logic. Images uploaded to cloud storage use the cloud protocol, preventing users from obtaining permanent addresses.

The rich text editor component and rich text display component internally convert private images using the cloud protocol. Specifically, they transform private addresses with the cloud://xxxx protocol into publicly accessible addresses using the http protocol, then display the images using the generated temporary access links.

Therefore, if the rich text contains images obtained via the built-in image upload plugin of the rich text editor, then:

• Directly copy the displayed html code (the image validity period may have expired)
• Directly use the original html code from the database (images remain in the original cloud protocol)
• When exporting via template installation, the rich text html template data (containing cloud protocol links) is exported, but the actual file data corresponding to the links is not synchronously exported, resulting in the inability to obtain the corresponding files during final image display.
• or other operations that bypass hotlink protection logic, etc.

may cause images to display abnormally.

Users can also flexibly convert and utilize images using the cloud protocol stored in the database. For details, refer to Obtaining Temporary Access Links for Cloud Storage Files

Why do externally linked images display abnormally?

Many websites' images verify the page referrer, likely due to enabled hotlink protection. When accessed directly, there's no referrer source, but when used on your page, access may be blocked by referrer verification. You may try alternative image resources or check the loading failure messages in F12 developer tools.

What HTML nodes and attributes does rich text support?

Globally supports class and style attributes, but does not support the id attribute.

Refer to Trusted HTML Nodes and Attributes

Can QR codes in rich text be recognized and opened via long-press?

Since the rich-text component in mini programs blocks all node events, it currently does not support long-press recognition to open QR codes.