Ich habe HTML, das über einen Rich Text Editor außerhalb meiner Flex-Anwendung generiert wird, möchte es jedoch in Flex anzeigen.Anzeigen von HTML in einer Flex-Anwendung
Der HTML-Code ist einfach HTML-Tags, Dinge wie Stile, Anker und möglicherweise Bild-Tags, gibt es ein Steuerelement, das ich HTML im Flex Render machen würde oder werde ich meine Ärmel hochkrempeln und meine eigenen rollen ?
Alle Ideen geschätzt ... Danke.
Wenn die HTML-wirklich einfach ist, kann man es in einer normalen Etikett oder Textarea-Komponente angezeigt werden, wenn es komplizierter ist, werde ich zitieren, was ich in this question beantwortet. Die Diskussion dort hat auch ein wenig mehr Informationen.
Wenn es komplexe HTML und Javascript ist eine mögliche Art und Weise ist HTMLComponent, eine Methode, die ein iframe über Ihre Flash verwendet, um es erscheinen zu lassen, wie die HTML in Ihrer Anwendung ist. Es gibt jedoch einige Nachteile dieser Methode - die meisten von ihnen im Detail beschrieben at Deitte.com.
Wenn dies offline gehen kann, könnten Sie Air (es hat eine mx: HTML-Komponente eingebaut) verwenden. Deitte.com hat ein Detail dieser Technik.
Schauen Sie sich die Dokumentation auf mx.controls.Label und flash.text.TextField (das ist, was den Text zeigt in einer Text oder Label Kontrolle in Flex). Die TextField Dokumentation besagt, dass
Das <img>-Tag können Sie externe Bilddateien (JPEG, GIF, PNG), SWF-Dateien und Movieclips in Textfeldern einbetten. Text fließt automatisch um Bilder, die Sie in Textfelder einbetten. Um dieses Tag zu verwenden, müssen Sie das Textfeld als mehrzeilig und als Zeilenumbruch festlegen.
Was bedeutet, dass Sie ein Bild in einer Text Komponente in Flex, indem seine htmlText Eigenschaft auf einige HTML, die enthält einen <img> Tag angezeigt werden können. Sie können Label nicht verwenden, da es nicht mehrzeilig ist.
Ich habe festgestellt, dass Textfelder Probleme mit der richtigen Messung ihrer Höhen haben, wenn die Bilder in ihnen links oder rechts mit Text um sie herum ausgerichtet ausgerichtet sind (z. B. align="left"). Unter Umständen müssen Sie zusätzlichen Abstand hinzufügen, um dem entgegenzuwirken, wenn Sie ausgerichtete Bilder verwenden möchten.
@mmattax
der Tat können Sie Bilder in einer Textarea-Komponente angezeigt werden soll. Der Ansatz is not entirely without problems though ...
Sie müssen Flex iFrame-Steuerelement verwenden. Es ist keine 100% Flash-Lösungen, und kombiniert ein bisschen js Anrufe, funktioniert aber perfekt für mich.
können Sie neuesten Quellcode greifen von Github https://github.com/flex-users/flex-iframe
Hier ist ein Beispielcode aus dem Komponente Autor.
<!---
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>