1# richtext 2 3The **\<richtext>** component displays rich text information. 4 5>  **NOTE:** 6> 7> - The rich text content must be written in the content area. 8 9## Required Permissions 10 11None 12 13## Attributes 14 15Only the **id**, **style**, and **class** attributes in [Universal Attributes](js-components-common-attributes.md) are supported. 16 17## Styles 18 19Only the **display** and** visibility** styles in [Universal Styles](js-components-common-styles.md) are supported. 20 21## Events 22 23In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. 24 25 26 27| Name | Parameter | Description | 28| -------- | --------- | --------------------------------------- | 29| start | - | Triggered when the loading starts. | 30| complete | - | Triggered when the loading is complete. | 31 32>  **NOTE:** 33> 34> - The **focus**, **blur**, and **key** events are not supported. 35> - Accessibility events are not supported. 36> - When a page containing **\<richtext>** is returned, the page's transition effect does not apply to the area where the rich text is displayed. 37> - Make sure the rich text does not go beyond the height of the screen. Otherwise, the excess content will not be displayed. 38> - The width cannot be set. By default, the rich text is displayed in full screen. 39 40## Methods 41 42Not supported 43 44## Example Code 45 46``` 47<!-- xxx.hml --> 48<div style="flex-direction: column;width: 100%;"> 49 <richtext @start="onLoadStart" @complete="onLoadEnd">{{content}}</richtext> 50</div> 51// xxx.js 52export default { 53 data: { 54 content: ` 55 <div class="flex-direction: column; background-color: #ffffff; padding: 30px; margin-bottom: 30px;" style="background-color: #FFFFFF"> 56 <style>h1{color: yellow;}</style> 57 <p class="item-title">h1</p> 58 <h1>Text test (H1 test)</h1> 59 <p class="item-title">h2</p> 60 <h2>Text test (H2 test)</h2> 61 </div> 62 `, 63 }, 64 onLoadStart() { 65 console.error("start load rich text:" + JSON.stringify()) 66 }, 67 onLoadEnd() { 68 console.error("end load rich text:" + JSON.stringify()) 69 } 70} 71```
){kind=link}