1# richtext
2
3
4>  **说明：**
5>
6> - 该组件从API version 6开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
7>
8> - 富文本内容需要写在元素标签内。
9
10富文本组件，用于展示富文本信息。
11
12## 权限列表
13
14无
15
16
17## 属性
18
19仅支持[通用属性](js-components-common-attributes.md)中的id、style和class属性。
20
21
22## 样式
23
24仅支持[通用样式](js-components-common-styles.md)中的display和visibility样式。
25
26
27## 事件
28
29除支持[通用事件](js-components-common-events.md)外，还支持如下事件：
30
31| 名称 | 参数 | 描述 |
32| -------- | -------- | -------- |
33| start | - | 开始加载时触发。 |
34| complete | - | 加载完成时触发。 |
35
36>  **说明：**
37> - 不支持focus、blur、key事件。
38>
39> - 不支持无障碍事件。
40>
41> - 包含richtext的页面返回时richtext显示区域不会跟随页面的转场动效。
42>
43> - richtext内容不建议超过一个屏幕高度，超出部分不会显示。
44>
45> - 不支持设置宽度，默认撑开全屏。
46
47
48## 方法
49
50不支持。
51
52
53## 示例
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>文本测试(h1测试)</h1>
71      <p class="item-title">h2</p>
72      <h2>文本测试(h2测试)</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