您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 更多程式設計知識

Flex TextArea 實現單控件多顏色富文本渲染：TextFlow + HTML 方案

編輯：更多程式設計知識

Flex Label 僅支持單一樣式，實現單控件內多顏色、多字體、混合排版需使用 TextArea (Spark) 配合 TextFlow 与 TextConverter 解析 HTML 片段。

核心實現：HTML 字符串 → TextFlow → TextArea


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="https://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    creationComplete="init()">

<fx:Script>
<![CDATA[
    import flashx.textLayout.conversion.TextConverter;
    
    public function init():void {
        // HTML 片段：支持 <font>, <b>, <i>, <u>, <span> 等標籤
        var html:String = "<font color='#FF0000'>紅色文本</font> " +
                          "<font color='#32CD32'>綠色文本</font> " +
                          "<b>粗體</b> " +
                          "<i>斜體</i>";
        
        // 關鍵：導入 HTML 格式生成 TextFlow
        textArea.textFlow = TextConverter.importToFlow(
            html, 
            TextConverter.TEXT_FIELD_HTML_FORMAT
        );
    }
]]>
</fx:Script>

<mx:Canvas x="100" y="100" width="400" height="200">
    <s:TextArea id="textArea" width="100%" height="100%" editable="false" />
</mx:Canvas>

</s:Application>

TextConverter 支持的 HTML 子集

標籤/屬性	效果	示例
`<font color='#RRGGBB'>`	文字顏色	`<font color='#FF0000'>紅</font>`
`<font size='12'>`	字體大小(pt)	`<font size='14'>大字</font>`
`<font face='SimHei'>`	字體族	`<font face='Microsoft YaHei'>雅黑</font>`
`<b>`, `<strong>`	粗體	`<b>重要</b>`
`<i>`, `<em>`	斜體	`<i>引用</i>`
`<u>`	下劃線	`<u>鏈接</u>`
`<span style='...'>`	內聯 CSS 樣式	`<span style='color:red;font-weight:bold'>紅粗</span>`
`<p align='center'>`	段落對齊	`<p align='center'>居中</p>`
`<a href='...'>`	超鏈接 (需事件處理)	`<a href='event:click'>點我</a>`
`<img src='...'>`	內嵌圖片	`<img src='@Embed(source="icon.png")' />`

進階：動態拼接與安全過濾


public function appendColoredText(label:String, color:String, bold:Boolean = false):void {
    var tag:String = bold ? "b" : "span";
    var html:String = "<font color='" + escapeHtml(color) + "'><" + tag + ">" 
                    + escapeHtml(label) + "</" + tag + "></font>";
    
    var newFlow:TextFlow = TextConverter.importToFlow(html, TextConverter.TEXT_FIELD_HTML_FORMAT);
    
    // 追加到現有 TextFlow
    if (textArea.textFlow) {
        textArea.textFlow.flowComposer.compose();  // 確保當前佈局完成
        textArea.textFlow.appendChild(newFlow);
    } else {
        textArea.textFlow = newFlow;
    }
}

// 簡單 HTML 轉義，防注入
private function escapeHtml(str:String):String {
    return str.replace(/&/g, "&")
              .replace(//g, ">")
              .replace(/"/g, """)
              .replace(/'/g, "'");
}

富文本交互：超鏈接點擊事件


textArea.addEventListener(TextEvent.LINK, function(e:TextEvent):void {
    var href:String = e.text;  // href 屬性值
    if (href.indexOf("event:") == 0) {
        var action:String = href.substr(7);
        // 執行內部動作：導航、彈窗、調用服務...
        navigateToURL(new URLRequest("https://example.com/" + action));
    }
});

性能與限制

限制	說明	應對
HTML 子集有限	不支持完整 CSS、JS、table 等複雜結構	複雜排版用 TLF 低級 API 手動構建 TextFlow
大量文本性能	TextFlow 佈局開銷大	分頁加載、虛擬化、或用 Label 列表替代
編輯模式複雜	可編輯富文本需自定義編輯器	集成 TinyMCE/CKEditor (ExternalInterface) 或用商業組件
中文換行	需設置 `breakOpportunity="any"`	`textArea.textFlow.hostFormat.breakOpportunity = "any"`

總結

Spark TextArea + TextConverter.importToFlow(HTML) 是 Flex 實現單控件多樣式文本的標準路徑。掌握支持的 HTML 子集、動態拼接追加模式、超鏈接事件處理、中文換行配置，即可覆蓋 90% 富文本展示需求。複雜編輯場景建議引入成熟 Web 編輯器組件。