Question

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

HTML是简单的HTML标签，像样式，锚点和可能的图像标签之类的东西，是否有一个控件可以让我在flex中呈现这个HTML，或者我将不得不卷起袖子并自己动手？

任何想法都赞赏...谢谢。

Answer 1

如果HTML 真的简单，你可以在普通标签或textarea组件中显示它。如果它更复杂，我会引用我回答in this question的内容。那里的讨论还有一些信息。

如果它是复杂的HTML和Javascript，一种可能的方法是HTMLComponent，这种方法在您的Flash上使用iframe使其看起来像HTML在您的应用中。但是这种方法有一些缺点 - 大多数都在详细描述at Deitte.com。

如果这可以离线移动，您可以使用Air（它内置了mx：HTML组件）。 Deitte.com也详细介绍了这项技术。

Answer 2

查看mx.controls.Label和flash.text.TextField上的文档（显示Flex中Text或Label控件中的文字）。 TextField文档指出

＆lt; img＆gt; tag允许您在文本字段中嵌入外部图像文件（JPEG，GIF，PNG），SWF文件和影片剪辑。文本会自动在您嵌入文本字段的图像周围流动。要使用此标记，必须将文本字段设置为多行并包装文本。

这意味着您可以通过将其Text属性设置为包含htmlText标记的某个HTML，在Flex中的<img>组件中显示图像。您无法使用Label，因为它不是多线。

我注意到如果文本字段中显示的图像与围绕它们的文本左右对齐（例如align="left"），则文本字段无法正确测量其高度。如果您打算使用对齐的图像，可能需要在下面添加一些额外的间距来反击。

Answer 3

您必须使用flex iFrame控件。它不是一个100％的闪存解决方案，并结合了一些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>

Answer 4

@mmattax

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

在Flex应用程序中显示HTML

4 个答案: