尝试在 textarea 控件中显示 HTML 文本

Posted 2023-05-07

【中文标题】尝试在 textarea 控件中显示 HTML 文本

【英文标题】：Trying to display HTML text in a textarea control

【发布时间】：2012-04-27 02:48:48

【问题描述】：

我创建了一个 textArea 元素，但无法显示我的 html 内容。如果我只显示常规文本，它可以工作，或者如果我将 textArea 元素更改为 RichEditableText 元素，它可以正常工作。由于这是针对移动应用程序，我更喜欢使用 Adob​​e 推荐的 textArea 元素。

这是 textArea 的 MXML 代码。我得到的只是边框，没有显示任何内容。

<s:TextArea id="myHelp" editable="false"  >
<s:textFlow>
  <s:TextFlow>
    <s:p fontSize="20">Version: 1.0.0.1</s:p>
       </s:TextFlow>
     </s:textFlow>
</s:TextArea>

任何帮助将不胜感激。

干杯，

【参考方案1】：

<s:TextArea id="txt_ar"  textAlign="justify"
borderAlpha="0" editable="false">

然后写你的html字符串

textrichtml:String = "your html string"

然后使用以下代码。

txt_ar.textFlow = TextConverter.importToFlow(textrichtml,TextConverter.TEXT_FIELD_HTML_FORMAT);

【讨论】：

谢谢，但这也不起作用。经过更多研究后，我发现一篇文章表明 Adob​​e 不支持移动皮肤中带有 textArea 的 TLF。然而，Adobe 建议在移动设备上使用 textArea 而不是 RichEditableText。难以置信。 [链接]workflowflash.com/49235/…

【参考方案2】：

在 Flex 4.0 中删除了 TextArea 中的 htmlText 属性，您可以使用 content 属性或 TextConverter。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <s:layout>
        <s:BasicLayout />
    </s:layout>
    <fx:Script>
        <![CDATA[
            import flashx.textLayout.conversion.TextConverter;
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <fx:String id="htmlSample">
            <![CDATA[This is <font color="#EE1122">HTML text</font> in a <b>TextArea control</b>. Use the <u>textFlow property</u> of the <font color="#22A050">TextArea control</font> to include basic HTML markup in your text.</s:a>.
        ]]></fx:String>
    </fx:Declarations>
    <s:VGroup left="10" right="10" top="10" bottom="10">
        <s:TextArea id="htmlDisplay"   editable="false">
            <s:content>This is <s:span color="#FF0000">HTML text</s:span>
                in an <s:span fontWeight="bold">Spark TextArea control</s:span>.
                Use the <s:span textDecoration="underline">content</s:span> property
                of the <s:span color="#008800">Spark TextArea control</s:span> 
                to include basic HTML markup in your text, including
                <s:a href="http://www.adobe.com" target="_blank">links</s:a>.
            </s:content>
        </s:TextArea>

        <s:TextArea   editable="false" textFlow="TextConverter.importToFlow(htmlSample, TextConverter.TEXT_FIELD_HTML_FORMAT)">
        </s:TextArea>
    </s:VGroup>
</s:Application>

或者在TextArea中使用htmlText属性

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Script>
        <![CDATA[
            [Bindable]
            private var _htmlText:String = "This is 14 point blue italic text.<br><b><font color='#000000' size='10'>This text is 10 point black, italic, and bold.</font></b>";
        ]]>
    </mx:Script>

    <mx:TextArea   color="0x323232">
        <mx:htmlText><![CDATA[This is <font color="#EE1122">HTML text</font> in a <b>TextArea control</b>. Use the <u>htmlText property</u> of the <font color="#22A050">TextArea control</font> to include basic HTML markup in your text.]]></mx:htmlText>
    </mx:TextArea>

    <mx:TextArea   color="blue" fontStyle="italic" fontSize="14" htmlText="_htmlText"
                 editable="false" selectable="false"/>

</mx:Application>