代码之家 › 专栏 › 技术社区 › mmattax

在Flex应用程序中显示HTML

actionscript-3 flex

2

mmattax · 技术社区 · 16 年前

我有一些HTML是在Flex应用程序之外通过富文本编辑器生成的,但是希望在Flex中显示它。

HTML是简单的HTML标记,比如样式、锚定和可能的图像标记,是否有一个控件可以让我在flex中呈现这个HTML,或者我必须卷起袖子,自己卷起袖子?

有什么好主意…谢谢。

4 回复 | 直到 16 年前

1

3

Community CDub 8 年前

如果HTML是 真正地 很简单,您可以将其显示在普通的标签或文本区域组件中,如果它更复杂,我将引用我的答案 in this question . 那里的讨论也有更多的信息。

如果是复杂的HTML和Javascript,一种可能的方法是 HTMLComponent ,该方法在flash上使用iframe使其看起来像应用程序中的HTML。不过,这种方法也有一些缺点——大多数都有详细描述 at Deitte.com .

如果可以脱机,可以使用Air(它内置了mx:HTML组件)。 Deitte.com 也有这个技术的细节。

2

1

Theo 16 年前

查看上的文档 mx.controls.Label 和 flash.text.TextField (这就是在 Text 或 Label Flex中的控件)。这个 TextField 文件表明

<img>标记允许您在文本字段中嵌入外部图像文件(JPEG、GIF、PNG)、SWF文件和电影剪辑。文本自动围绕嵌入到文本字段中的图像流动。若要使用此标记,必须将文本字段设置为多行并换行。

这意味着您可以在 文本 通过设置 htmlText 属性设置为包含 <img> 标签。你不能用 标签 ,因为它不是多行。

我注意到,如果文本字段中显示的图像与周围的文本(例如。 align="left" ). 如果计划使用对齐的图像,则可能需要在下面添加一些额外的间距来抵消该间距。

3

1

Adrian Pirvulescu 13 年前

必须使用flex iFrame控件。它不是一个100%的flash解决方案,并且结合了一些js调用,但对我来说非常有效。

您可以从github获取最新的源代码 https://github.com/flex-users/flex-iframe

下面是组件作者的一些示例代码。

<!---
    A basic example application showing how to embed a local html page in a Flex application.

    @author Alistair Rutherford
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
                xmlns:flexiframe="http://code.google.com/p/flex-iframe/"
                horizontalAlign="center"
                verticalAlign="middle"
                viewSourceURL="srcview/index.html">

    <!-- Example project presentation -->
    <mx:ApplicationControlBar dock="true">
        <mx:Text selectable="false">
            <mx:htmlText><![CDATA[<font color="#000000" size="12"><b>flex-iframe - Simple html example</b><br>This example shows how to embed a simple Html page in a Flex application.</font>]]></mx:htmlText>
        </mx:Text>
    </mx:ApplicationControlBar>

    <!-- HTML content stored in a String -->
    <mx:String id="iFrameHTMLContent">
        <![CDATA[
            <html>
                <head>
                    <title>About</title>
                </head>
                <body>
                    <div>About</div>
                    <p>Simple HTML Test application. This test app loads a page of html locally.</p>
                    <div>Credits</div>
                    <p> </p>
                    <p>IFrame.as is based on the work of</p>
                    <ul>
                      <li><a href="http://coenraets.org/" target="_top">Christophe Coenraets</a></li>
                      <li><a href="http://www.deitte.com/" target="_top">Brian Deitte</a></li>
                    </ul>
                </body>
            </html>
        ]]>
    </mx:String>

    <!-- Example using the 'source' property -->
    <mx:Panel title="A simple Html page embedded with the 'source' property"
              width="80%"
              height="80%">

        <flexiframe:IFrame id="iFrameBySource"
                           width="100%"
                           height="100%"
                           source="about.html"/>
    </mx:Panel>

    <!-- Example using the 'content' property -->
    <mx:Panel title="A simple Html page embedded with the 'content' property"
              width="80%"
              height="80%">

        <flexiframe:IFrame id="iFrameByContent"
                           width="100%"
                           height="100%"
                           content="{iFrameHTMLContent}"/>
    </mx:Panel>

</mx:Application>

4

0

Niko Nyman David Karlsson 16 年前

@mmattax公司

实际上,您可以在TextArea组件中显示图像。方法 is not entirely without problems though ...