Question

在flex应用程序中，我想在spark textarea中显示格式化的推文，但它显示html元素（带标签）'因为它'而不是解析它并转换为丰富的html文本，我是从flex中关注此示例官方网站

<s:TextArea width="400" height="100">
    <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>
    <s:content>{TwitterString.parseTweet(data.text)}</s:content>
</s:TextArea>

和推文的结果是

<s:a href='http://t.co/a7bQnmLRGy' target='_blank'>http://t.co/a7bQnmLRGy</s:a> I'll be there

表示未按预期格式化。

知道如何让<s:content>为动态内容工作吗？

请不要回答TextConverter这是我的最后一招，我很乐意使用<s:content>工作

Answer 1

查看TextArea的{{3}}财产的文档。特别是，它说明了content属性：

此属性的类型为Object，因为您可以将其设置为String，FlowElement或String和FlowElements数组。在上面的示例中，内容是2元素数组。第一个数组元素是字符串“Hello”。第二个数组元素是一个SpanElement对象，文本“World”以粗体显示。

因此，关键是您的TwitterString.parseTweet()函数返回String。因此，TextArea将其显示为String，并且无需转换文本中找到的元素。

相反，如果您希望继续沿着此路径前进，则TwitterString.parseTweet()函数应返回Array。数组中的每个元素都是String（表示普通文本）或某种FlowElement对象（SpanElement，LinkElement，ParagraphElement等。）。如果返回包含所需结构的数组，它将正确呈现您的内容。请参阅下面的一个简单示例，它将对实际内容非常繁琐。

所以你最好不要使用TextConverter ...因为通过编写你想要的代码，你正在做{strong>完全相同的事情 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" xmlns:local="*">

    <fx:Script>
        <![CDATA[
            import flashx.textLayout.elements.LinkElement;
            import flashx.textLayout.elements.SpanElement;

            [Bindable("contentChanged")]
            private function getTheContent():Array
            {
                var temp:Array = [];
                var link:LinkElement = new LinkElement();
                link.href = "http://google.com";
                var span:SpanElement = new SpanElement();
                span.text = "Google";
                link.addChild(span);
                temp.push(link);
                // continue building your structure...(so tedious)
                return temp;
            }
        ]]>
    </fx:Script>

    <s:TextArea width="400" height="100">
        <s:content>{getTheContent()}</s:content>
    </s:TextArea>
</s:Application>

spark textarea中未显示HTML动态内容

1 个答案: