<external-richtext> 是螞蟻動態卡片引擎內建的組件，用來渲染富文本。
嵌入組件支援
不可以嵌套任何其他組件。
樣式
<external-richtext>組件支援 通用樣式 中的所有樣式，並且支援部分特殊樣式。
格式
支援 HTML 標籤格式，目前包含以下與字型相關的標籤。
標籤 | 描述 | 寫法 | 備忘 |
br | 換行 | <p> To break<br />lines<br />in a<br />paragraph,<br />use the br tag. </p> | - |
span | 用來組合文檔中的行內元素 | <p> some other text.</p> | - |
div | 把文檔分割為獨立的、不同的部分 |
<h3>This is a header</h3> <p>This is a paragraph.</p> | - |
b | 加粗文本 | <p>這是普通文本 - <b>這是粗體文本</b>。</p> | - |
del | 刪除文本 | a dozen is 12 pieces | - |
h1 | 標題 1 | <h1>這是標題 1</h1> | - |
h2 | 標題 2 | <h2>這是標題 2</h2> | - |
h3 | 標題 3 | <h3>這是標題 3</h3> | - |
h4 | 標題 4 | <h4>這是標題 4</h4> | - |
h5 | 標題 5 | <h5>這是標題 5</h5> | - |
h6 | 標題 6 | <h6>這是標題 6</h6> | - |
i | 斜體文本 | <i>郵箱斜體cn42ducn4***@163.comt3@42du.online</i> | - |
p | 定義段落 | <p>This is some text in a very short paragraph</p> | - |
img | 定義圖片 | src：下載連結 width/height：圖片繪製寬/高 <img src='https://gw-office.alipayobjects.com/basement_prod/2e4245df-3518-434c-bac6-244447b6800f.png' width=18rpx height=18rpx /> | 寬高預設值與字型高度相同。 設定寬高大於行高時，繪製效果上不支援把行高撐開。 |
a | 定義連結 | href：連結跳轉地址 <a href='https://www.alipay.com'> | - |
字型相關
屬性 | 描述 | 實值型別 | 寫法 | 備忘 |
font-size | 文字大小 | 長度單位 | <span style=\"font-size:30px;\">內聯30px</span> | - |
效果相關
屬性 | 描述 | 實值型別 | 寫法 | 備忘 |
color | 字型顏色 | 色彩單位 | <span style=\"color:#F00\">內聯#F00</span> | - |
font-weight | 字重 | string | <span style=\"font-weight:100\">內聯#F00</span> | 取值和 text 標籤中基礎樣式的 樣式 相同。 |
font-family | 字型 | string | <span style=\"font-family:thinFont\">字型瘦體</span> | 取值和 text 標籤中基礎樣式的 樣式 相同。 |
屬性
屬性 | 描述 | 實值型別 | 預設值 | 寫法 | 備忘 |
text | 組件的值，常值內容 | string | <external-richtext text="richtextContent"></external-richtext> | - | |
line-space | 行間距，如 4px | 長度單位 | <external-richtext line-space="4px"></external-richtext> | - | |
detectEmotionEmoji | 是否檢測自訂 Emoji 表情 | 1/0 | 0 | <external-richtext text="richtextContent" detectEmotionEmoji="1" ></external-richtext> | - |
linkColor | 設定連結字型顏色（a 標籤） | 色彩單位 | 0xff108ee9 | <external-richtext text="richtextContent" linkColor="#FF0000"></external-richtext> | - |
highlightedColor | 設定連結點擊醒目提示 | 色彩單位 | 0xffa9a9a9 | <external-richtext text="richtextContent" highlightedColor="#0000FF" ></external-richtext> | - |
為 img 標籤設定的 height 大於行高時，繪製效果不會把行高撐開，預設與字型高度相同。
為 img 標籤設定 width 和 height，會使圖片壓縮放以填滿。
a 標籤連結字型顏色 span 設定優先權高於屬性 linkcolor 設定。
highlightedColor 控制醒目提示，包括 a 標籤連結。如果不設定，預設灰色。
表情大小與字型高度相同。
事件
<richtext> 組件支援 通用事件 中的所有事件。
樣本
<external-richtext
:text="richTextContent"
:line-space="4px"
></external-richtext>
data: {
richTextContent:
'<span style=\"font-size:30px;\">內聯30px</span><span style=\"font-size:30rpx;\">內聯30rpx</span><span style=\"color:#F00\">內聯#F00</span>
<span>全域30px,color:#F00</span>
<span>全域30rpx,color:#0F0</span>
<span style=\"font-size:30px;color:#00F\">內聯30px,color#0F0</span><span>全域20px,color#0F0</span>
<div style=\"color:#F00\"><div><div>最外部#F00</div></div></div>
<div><div><div style=\"color:#F00\">最內部#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>'
}
範例程式碼
單擊此處 detailRichtext.zip 擷取完整範例程式碼。