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