Answered
<img> not working in RichText
I want to 'embed' images in my text and so I started experimenting with RichText, TextFlow, etc. To my frustration, I cannot display images in RichText in the way I would like to create TextFlow object (the way 'string' data would come from database, that is converted to TextFlow by the 'view').
Here is a very simple application to put this point across:
============
<?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"
width="1000"
creationComplete="application1_initializeHandler(event)"
>
<s:RichText
id="richTxt"
width="100%"
textFlow="{textFlow}"
horizontalCenter="0"
verticalCenter="0"
/> <fx:Declarations>
</fx:Declarations>
<fx:Script>
<![CDATA[
import flashx.textLayout.elements.TextFlow;
import spark.utils.TextFlowUtil;
import mx.events.FlexEvent;
import org.osmf.layout.AbsoluteLayoutFacet;
[Bindable]
private var textFlow:TextFlow;
private var inputString:String =
"<TextFlow whiteSpaceCollapse='preserve' xmlns='http://ns.adobe.com/textLayout/2008'>" +
"<p>" +
"<span fontFamily='Verdana' fontSize='18'>There should be an image between this...</span>" +
"<img height='auto' width='auto' source='assets/images/math.png'/>" +
"<span fontFamily='Verdana' fontSize='18'>... and this.</span>" +
"<span></span>" +
"</p>" +
"</TextFlow>";
protected function application1_initializeHandler(event:FlexEvent):void {
textFlow = TextFlowUtil.importFromXML(new XML(inputString));
}
]]>
</fx:Script>
</s:Application>
<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"
width="1000"
creationComplete="application1_initializeHandler(event)"
>
<s:RichText
id="richTxt"
width="100%"
textFlow="{textFlow}"
horizontalCenter="0"
verticalCenter="0"
/> <fx:Declarations>
</fx:Declarations>
<fx:Script>
<![CDATA[
import flashx.textLayout.elements.TextFlow;
import spark.utils.TextFlowUtil;
import mx.events.FlexEvent;
import org.osmf.layout.AbsoluteLayoutFacet;
[Bindable]
private var textFlow:TextFlow;
private var inputString:String =
"<TextFlow whiteSpaceCollapse='preserve' xmlns='http://ns.adobe.com/textLayout/2008'>" +
"<p>" +
"<span fontFamily='Verdana' fontSize='18'>There should be an image between this...</span>" +
"<img height='auto' width='auto' source='assets/images/math.png'/>" +
"<span fontFamily='Verdana' fontSize='18'>... and this.</span>" +
"<span></span>" +
"</p>" +
"</TextFlow>";
protected function application1_initializeHandler(event:FlexEvent):void {
textFlow = TextFlowUtil.importFromXML(new XML(inputString));
}
]]>
</fx:Script>
</s:Application>
===========
Here is math.png that you can save in assets/images/
If you replace RichText with TextArea, the image shows up! Could someone please demystify this?
Thanks!
AdChoices