首页 / 知识

关于 actionscript 3：在 Flex 应用程序中显示 HTML

2023-04-14 15:26:00

displaying HTML inside a Flex application

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

HTML 是简单的 HTML 标记，例如样式、锚点和可能的图像标记，是否有控件可以让我以 flex 呈现此 HTML，还是我必须卷起袖子自己动手？

任何想法表示赞赏...谢谢。

如果 HTML 真的很简单，可以在普通的 label 或 textarea 组件中显示，如果比较复杂，我会引用我在这个问题中回答的内容。那里的讨论也有更多信息。

If it is complex HTML and Javascript, one possible way is HTMLComponent, a method that uses an iframe over your flash to make it appear like the HTML is in your app. There are a few downsides to this method however - most of them described in detail at Deitte.com.

If this can move offline, you could use Air (it has an mx:HTML component built in). Deitte.com has a detail of this technique as well.

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

!---
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"bflex-iframe - Simple html example/bbrThis 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
titleAbout/title
/head
body
divAbout/div
pSimple HTML Test application. This test app loads a page of html locally./p
divCredits/div
p /p
pIFrame.as is based on the work of/p
ul
lia href="http://coenraets.org/" target="_top"Christophe Coenraets/a/li
lia 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

查看关于 mx.controls.Label 和 flash.text.TextField 的文档(这是在 Flex 中的 Text 或 Label 控件中显示文本的内容)。 TextField 文档指出

The img tag lets you embed external image files (JPEG, GIF, PNG), SWF files, and movie clips inside text fields. Text automatically flows around images you embed in text fields. To use this tag, you must set the text field to be multiline and to wrap text.

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

我注意到，如果文本字段中显示的图像与周围的文本左对齐或右对齐(例如 align="left")，则文本字段无法正确测量其高度。如果您打算使用对齐的图像，您可能需要在下方添加一些额外的间距以应对这种情况。

@mmattax

确实，您可以在 TextArea 组件中显示图像。不过，这种方法并非完全没有问题……

应用程序显示富文本编辑器图像