目录

RichText

The RichText component parses and displays HTML text.

  • This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
  • This component is not able to auto-adapt its width and height to the content. Therefore, you must set the layout when using this component.
  • This component is no longer updated and maintained. You are advised to use the Web component.

Child Components

Not supported

APIs

RichText(content:string | Resource)

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
content string | Resource 20+ Yes HTML string or local resource file.

Events

[h2]onStart

onStart(callback: () => void)

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
callback () => void Yes Callback triggered when a web page is loaded.

[h2]onComplete

onComplete(callback: () => void)

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
callback () => void Yes Callback triggered when a web page is loaded.

Attributes

Among the universal attributes, only the width, height, size, and layoutWeight attributes are supported.

Supported Tags

Name Description Example
<h1>--<h6> Defines six levels of headings in the HTML document. <h1> defines the most important heading, and <h6> defines the least important heading. <h1>This is an H1 heading</h1> <h2>This is an H2 heading</h2>
<p></p> Defines a paragraph. <p>This is a paragraph</p>
<br/> Inserts a newline character. <p>This is a paragraph<br/>This is a new paragraph</p>
<font/> Defines the font style for the text contained within it, including the font face, size, and color. In the tag, the font size can be set only to a number ranging from 1 to 7, with the default value being 3. This tag is deprecated in HTML 4.01 and not supported in XHTML1.0 Strict DTD. Use the CSS font properties to style text instead. CSS syntax: <p style="font-size: 35px; font-family: verdana; color: rgb(24,78,228)"> <font size="3" face="arial" color="red">This is in red</font>
<hr/> Defines a thematic break (such as a shift of topic) on an HTML page and creates a horizontal line. <p>This is a paragraph</p><hr/><p>This is a paragraph</p>
<image></image> Defines an image. <image src="resource://rawfile/icon.png"></image>
<div></div> Defines a generic container that is generally used to group block-level elements. It allows you to apply CSS styles to multiple elements at the same time. <div style='color:#0000FF'><h3>This is the heading in a div element</h3></div>
<i></i> Displays text in italic style. <i>This is in italic style</i>
<u></u> Defines text that should be styled differently or have a non-textual annotation, such as misspelt words or a proper name in Chinese text. It is recommended that you avoid using the <u> tag where it could be confused with a hyperlink. <p><u>This is an underlined paragraph</u></p>
<style></style> Used to embed CSS within an HTML document. <style>h1{color:red;}p{color:blue;}</style>
style Defines the inline style of an element. It is written inside the tag, requires quotation marks for distinction when used, and separates styles with semicolon(;). For example, style='width: 500px;height: 500px;border: 1px solid;margin: 0 auto;'. <h1 style='color:blue;text-align:center'>This is a heading</h1><p style='color:green'>This is a paragraph</p>
<script></script> Embeds or references a client-side script, such as JavaScript. <script>document.write("Hello World!")</script>

Example

You can preview how this component looks on a real device, but not in DevEco Studio Previewer.

// xxx.ets
@Entry
@Component
struct RichTextExample {
  @State data: string = '<h1 style="text-align: center;">h1 heading</h1>' +
  '<h1 style="text-align: center;"><i>h1 italic</i></h1>' +
  '<h1 style="text-align: center;"><u>h1 underlined</u></h1>' +
  '<h2 style="text-align: center;">h2 heading</h2>' +
  '<h3 style="text-align: center;">h3 heading</h3>' +
  '<p style="text-align: center;">Regular paragraph</p><hr/>' +
  '<div style="width: 500px;height: 500px;border: 1px solid;margin: 0 auto;">' +
  '<p style="font-size: 35px;text-align: center;font-weight: bold; color: rgb(24,78,228)">Font size: 35px; line height: 45px</p>' +
  '<p style="background-color: #e5e5e5;line-height: 45px;font-size: 35px;text-indent: 2em;">' +
  '<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>';

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,
      justifyContent: FlexAlign.Center }) {
      RichText(this.data)
        .onStart(() => {
          console.info('RichText onStart');
        })
        .onComplete(() => {
          console.info('RichText onComplete');
        })
        .width(500)
        .height(500)
        .backgroundColor(0XBDDB69)
      RichText('layoutWeight(1)')
        .onStart(() => {
          console.info('RichText onStart');
        })
        .onComplete(() => {
          console.info('RichText onComplete');
        })
        .size({ width: '100%', height: 110 })
        .backgroundColor(0X92D6CC)
        .layoutWeight(1)
      RichText('layoutWeight(2)')
        .onStart(() => {
          console.info('RichText onStart');
        })
        .onComplete(() => {
          console.info('RichText onComplete');
        })
        .size({ width: '100%', height: 110 })
        .backgroundColor(0X92C48D)
        .layoutWeight(2)
    }
  }
}

Loads local resource files.

Loads local resource files through $rawfile.

// xxx.ets
@Entry
@Component
struct RichTextComponent {

  build() {
    Column() {
      // Load a local resource file through $rawfile.
      RichText($rawfile("index.html"))
    }
  }
}

The following is an example of loading a link with the hash (#) route through the resources protocol in Webview.

When $rawfile is used to load a URL contains a number sign (#), the content following the number sign is treated as a fragment. To avoid this issue, you can use the resource://rawfile/ protocol prefix instead. If the URL contains a number sign (#), the content following the number sign is treated as an anchor (fragment).

// xxx.ets
@Entry
@Component
struct RichTextComponent {

  build() {
    Column() {
      // Load local resource files through the resource protocol.
      RichText("resource://rawfile/index.html#home")
    }
  }
}

Create an index.html file in src/main/resources/rawfile.

HTML file to be loaded:

<!-- index.html -->
<!DOCTYPE html>
<html>
    <body>
        <p>Hello World</p>
    </body>
</html>