<external-richtext> is a built-in component of Ant Cube Card Engine for rendering rich text.
Embedded component support
You cannot nest any other components.
Style
The <external-richtext> component supports all the Background information and some special styles.
Format
The HTML tag format is supported. Currently, the following font-related tags are included.
Tag | Description | Writing | Description |
br | Line break | <p> To break<br />lines<br />in a<br />paragraph,<br />use the br tag. </p> | - |
span | Used to group inline elements in a document | <p> some other text.</p> | - |
div | Split a document into separate, distinct parts |
<h3>This is a header</h3> <p>This is a paragraph.</p> | - |
b | Bold text | <p> This is plain text- <b> This is bold text </b>. </p> | - |
del | Remove text entries | a dozen is 12 pieces | - |
h1 | Title 1 | <h1> This is title 1</h1> | - |
h2 | Title 2 | <h2> This is title 2</h2> | - |
h3 | Title 3 | <h3> This is title 3</h3> | - |
h4 | Title 4 | <h4> This is title 4</h4> | - |
h5 | Title 5 | <h5> This is title 5</h5> | - |
h6 | Title 6 | <h6> This is title 6</h6> | - |
i | Italic text | <i> Email italic cn42ducn4***@163.comt3@42du.online</i> | - |
p | Define paragraph | <p>This is some text in a very short paragraph</p> | - |
img | Definition Image | src: download link width/height: image drawing width/height <img src='https://gw-office.alipayobjects.com/basement_prod/2e4245df-3518-434c-bac6-244447b6800f.png' width=18rpx height=18rpx /> | The default value for width and height is the same as the font height. If the width and height are set to be greater than the row height, the drawing effect does not support the stretching of the row height. |
a | Define Link | href: the URL of the link. <a href='https://www.alipay.com'> | - |
Font-related
Parameter | Description | Value Type | Writing | Description |
font-size | Font size | Length unit | <span style=\"font-size:30px;\"> Inline 30px</span> | - |
Effect-related
Parameter | Description | Value Type | Writing | Description |
color | Font color | Color unit | <span style=\"color:#F00\"> Inline# F00</span> | - |
font-weight | Word weight | String | <span style=\"font-weight:100\"> Inline# F00</span> | The value is the same as the value of the Basic Style parameter in the text tag. |
font-family | Font and color | String | <span style=\"font-family:thinFont\"> Font thin body </span> | The value is the same as the value of the Basic Style parameter in the text tag. |
Property
Parameter | Description | Value Type | Default value | Writing | Description |
text | The value of the component, 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 | Whether to check custom emoji | 1/0 | 0 | <external-richtext text="richtextContent" detectEmotionEmoji="1" ></external-richtext> | - |
linkColor | Set link font color (a label) | Color unit | 0xff108ee9 | <external-richtext text="richtextContent" linkColor="#FF0000"></external-richtext> | - |
highlightedColor | Set link click highlight color | Color unit | 0xffa9a9a9 | <external-richtext text="richtextContent" highlightedColor="#0000FF" ></external-richtext> | - |
If the height set for the img label is greater than the row height, the drawing effect does not spread the row height. By default, the height is the same as the font height.
If you set the width and height for the img tag, the image will be compressed and filled.
The a label link font color span setting takes precedence over the attribute linkcolor setting.
highlightedColor control the highlight color, including a tag links. If you do not specify this parameter, the default value is gray.
The emoticon size is the same as the font height.
Event
The <richtext> component supports all Common events.
Example
<external-richtext
:text="richTextContent"
:line-space="4px"
></external-richtext>
data: {
richTextContent:
'<span style=\"font-size:30px;\"> Inline 30px</span><span style=\"font-size:30rpx;\"> Inline 30rpx</span><span style=\"color:#F00\"> Inline# F00</span>
<span> Global 30px,color:#F00</span>
<span> Global 30rpx,color:#0F0</span>
<span style=\"font-size:30px;color:#00F\"> Inline 30px,color#0F0</span><span> Global 20px,color#0F0</span>
<div style=\"color:#F00\"><div><div> outermost# F00</div></div></div>
<div><div><div style=\"color:#F00\"> innermost# F00</div></div></div>
<b>b</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>i</i><p>p</p><span>span</span>'
}Example code
Click here detailRichtext.zip for the complete sample code.