<external-richtext> is a built-in component of the Ant Cube Card Engine that renders rich text.
Embedded component support
Nesting other components is not supported.
Styles
The <external-richtext> component supports all common styles and some special styles.
Format
This component supports the HTML tag format, including the following font-related tags.
Tag | Description | Syntax | Notes |
br | Line break | <p> To break<br />lines<br />in a<br />paragraph,<br />use the br tag. </p> | - |
span | Groups inline elements in a document. | <p> some other text.</p> | - |
div | Divides the document into separate and distinct sections. |
<h3>This is a header</h3> <p>This is a paragraph.</p> | - |
b | Bold text | <p>This is normal text - <b>this is bold text</b>.</p> | - |
del | Deleted text | a dozen is 12 pieces | - |
h1 | Heading 1 | <h1>This is Heading 1</h1> | - |
h2 | Heading 2 | <h2>This is Heading 2</h2> | - |
h3 | Heading 3 | <h3>This is Heading 3</h3> | - |
h4 | Heading 4 | <h4>This is Heading 4</h4> | - |
h5 | Heading 5 | <h5>This is Heading 5</h5> | - |
h6 | Heading 6 | <h6>This is Heading 6</h6> | - |
i | Italic text | <i>Italicized mailbox cn42ducn4***@163.comt3@42du.online</i> | - |
p | Defines a paragraph | <p>This is some text in a very short paragraph</p> | - |
img | Defines an image | src: The download link. width/height: The rendering width and height of the image. <img src='https://gw-office.alipayobjects.com/basement_prod/2e4245df-3518-434c-bac6-244447b6800f.png' width=18rpx height=18rpx /> | The default width and height are the same as the font height. If the width and height are set to be greater than the line height, the rendering does not expand the line height. |
a | Defines a link | href: The link URL. <a href='https://www.alipay.com'> | - |
Font-related styles
Property | Description | Value type | Syntax | Notes |
font-size | Font size | Length unit | <span style=\"font-size:30px;\">Inline 30px</span> | - |
Effects
Property | Description | Value type | Syntax | Notes |
color | Font color | Color unit | <span style=\"color:#F00\">Inline #F00</span> | - |
font-weight | Font weight | string | <span style=\"font-weight:100\">Inline #F00</span> | The values are the same as the styles of the text tag. |
font-family | Font | string | <span style=\"font-family:thinFont\">Thin font</span> | The values are the same as the styles of the text tag. |
Properties
Property | Description | Value type | Default value | Syntax | Notes |
text | The value of the component, which is the text content. | string | <external-richtext text="richtextContent"></external-richtext> | - | |
line-space | Line spacing, such as 4px. | Length unit | <external-richtext line-space="4px"></external-richtext> | - | |
detectEmotionEmoji | Specifies whether to detect custom emoji. | 1/0 | 0 | <external-richtext text="richtextContent" detectEmotionEmoji="1" ></external-richtext> | - |
linkColor | Sets the font color for links (a tags). | Color unit | 0xff108ee9 | <external-richtext text="richtextContent" linkColor="#FF0000"></external-richtext> | - |
highlightedColor | Sets the highlight color for clicked links. | Color unit | 0xffa9a9a9 | <external-richtext text="richtextContent" highlightedColor="#0000FF" ></external-richtext> | - |
If the height that you set for an img tag is greater than the line height, the line height is not expanded during rendering. By default, the image height is the same as the font height.
If you set the width and height for an img tag, the image is scaled to fill the specified dimensions.
The font color set for a link within a span tag has a higher priority than the linkColor property.
The highlightedColor property controls the highlight color, including for links in a tags. If this property is not set, the default color is gray.
The size of an emoji is the same as the font height.
Events
The <richtext> component supports all common events.
Example
<external-richtext
:text="richTextContent"
:line-space="4px"
></external-richtext>
data: {
richTextContent:
'Inline 30pxInline 30rpxInline #F00
Global 30px,color:#F00
Global 30rpx,color:#0F0
Inline 30px,color#0F0Global 20px,color#0F0
<div style=\"color:#F00\"><div><div>Outermost #F00</div></div></div>
<div><div><div style=\"color:#F00\">Innermost #F00</div></div></div>
b<del>del</del><div>div</div><h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6>i<p>p</p>span'
}Sample code
Click detailRichtext.zip to download the complete sample code.