Introduction

The rich text component is used to display mixed content, including text, images, and HTML. It supports custom styles, tap events, and other features, making it suitable for scenarios that require complex formatted text.

Usage

Configure it in the index.json of the page or component:

"usingComponents": {
  "fs-rich-text": "ava-ui/fxui/rich_text/index"
}

Code Demo

---

API

Properties

Property	Description	Type	Default
nodes	Rich text node array	array	[]
cStyle	Custom container style	string	''

nodes Data Structure

Each node is an object. The node type is determined by the type field:

Text Node (type: 'string'):

Property	Description	Type
context	Text content	string
color	Text color	string
fontSize	Font size (px)	string
fontWeight	Font weight: bold / normal	string
textDecoration	Text decoration: underline / line-through	string
width	Width (px)	string
height	Height (px)	string
onClick	Tap callback	function

Image Node (type: 'image'):

Property	Description	Type
context	Image URL (supports HTTP URL or npath)	string
placeholder	Placeholder image URL	string
width	Width (px)	string
height	Height (px)	string
onClick	Tap callback	function

HTML Node (type: 'html'):

Property	Description	Type
context	HTML string	string

Events

Event Name	Description	Parameters
linkTextTap	Triggered when a rich text node is tapped	{ nodeid: number }

---

Usage Examples

Text Node

data: {
  nodes: [{
    context: 'Red bold text',
    color: 'red',
    fontWeight: 'bold',
    fontSize: '18',
    type: 'string',
    onClick() {
      wx.showToast({ title: 'Text tapped', icon: 'none' });
    }
  }]
}

Image Node

data: {
  nodes: [{
    context: 'https://example.com/image.png',
    placeholder: 'https://example.com/placeholder.png',
    width: '60',
    height: '60',
    type: 'image',
    onClick() {
      wx.showToast({ title: 'Image tapped', icon: 'none' });
    }
  }]
}

HTML Node

data: {
  nodes: [{
    context: '<p style="color:#1989fa;">HTML content</p>',
    type: 'html'
  }]
}

---

打开预览