The <external-richtext> component renders rich text in the Ant Cube Card Engine.
Embedded component support
This component does not support nesting other components.
Styles
The <external-richtext> component supports all common styles and some special styles.
Format
HTML tag format is supported, 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. |
<p> some other text.</p> |
- |
|
div |
Divides the document into separate 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 |
Embeds an image. |
src: The image download URL. width/height: The rendered 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 /> |
By default, the width and height match the font height. If the width and height exceed the line height, the line height is not expanded during rendering. |
|
a |
Creates a hyperlink. |
href: The target 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 family |
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 text content of the component. |
string |
<external-richtext text="richtextContent"></external-richtext> |
- |
|
|
line-space |
The spacing between lines, such as 4px. |
Length unit |
<external-richtext line-space="4px"></external-richtext> |
- |
|
|
detectEmotionEmoji |
Whether to detect custom emoji. |
1/0 |
0 |
<external-richtext text="richtextContent" detectEmotionEmoji="1" ></external-richtext> |
- |
|
linkColor |
The font color for links (a tags). |
Color unit |
0xff108ee9 |
<external-richtext text="richtextContent" linkColor="#FF0000"></external-richtext> |
- |
|
highlightedColor |
The highlight color for tapped links. |
Color unit |
0xffa9a9a9 |
<external-richtext text="richtextContent" highlightedColor="#0000FF" ></external-richtext> |
- |
-
If the height of an img tag exceeds the line height, the line height is not expanded during rendering. By default, the image height matches the font height.
-
If you specify the width and height for an img tag, the image is scaled to fill the specified dimensions.
-
A font color set on a link within a span tag takes precedence over the linkColor property.
-
The highlightedColor property controls the highlight color for links in a tags. If not set, the default color is gray.
-
Emoji size matches 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.