richtext

NOTE

• This component is supported since API version 6. Updates will be marked with a superscript to indicate their earliest API version.

• The rich text content must be written in the content area.

The <richtext> component displays rich text information.

Required Permissions

None

Attributes

Only the id, style, and class attributes in Universal Attributes are supported.

Styles

Only the display and visibility styles in Universal Styles are supported.

Events

In addition to the universal events, the following events are supported.

NOTE

• The focus, blur, and key events are not supported.

• Accessibility events are not supported.

• When a page containing <richtext> is returned, the page's transition effect does not apply to the area where the rich text is displayed.

• Make sure the rich text does not go beyond the height of the screen. Otherwise, the excess content will not be displayed.

• The width cannot be set. By default, the rich text is displayed in full screen.

Methods

Not supported

Example

<!-- xxx.hml -->
<div style="flex-direction: column;width: 100%;">
  <richtext @start="onLoadStart" @complete="onLoadEnd">{{content}}</richtext>
</div>

// xxx.js
export default {
  data: {
    content: `
    <div class="flex-direction: column; background-color: #ffffff; padding: 30px; margin-bottom: 30px;"  style="background-color: #FFFFFF">
      <style>h1{color: yellow;}</style>
      <p class="item-title">h1</p>
      <h1>Text test (h1 test)</h1>
      <p class="item-title">h2</p>
      <h2>Text test (h2 test)</h2>
    </div>
    `,
  },
  onLoadStart() {
    console.error("start load rich text:" + JSON.stringify())
  },
  onLoadEnd() {
    console.error("end load rich text:" + JSON.stringify())
  }
}