使用Text Layout Framework实现图文混排

1.Flex Builder3要更新到3.0.2 http://www.adobe.com/support/flex/downloads_updaters.html 

2.下载Text Layout Framework http://labs.adobe.com/downloads/textlayout.html API文档： http://livedocs.adobe.com/labs/textlayout/package-summary.html

3.更新到Flash Player10 http://www.adobe.com/support/flashplayer/downloads.html 关于flshplayer10的新特性和相关资料，请查看 http://www.5uflash.com/yejiezatan/ziyuanfenxiang/3278.html

4.设置flex项目的属性Flex Compiler的Require Flash Player version为：10.0.0

5.拷贝Text Layout Framework 的三个swc（textLayout_conversion.swc、textLayout_core.swc、textLayout_edit.swc）到项目的libs目录中

6.编写mxml文件：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				layout="absolute"
				creationComplete="init()">
	<mx:Script>
		<![CDATA[
			import mx.managers.PopUpManager;
			import flash.text.engine.FontPosture;
			import flashx.textLayout.formats.CharacterFormat;
			import flashx.textLayout.events.StatusChangeEvent;
			import flashx.textLayout.elements.InlineGraphicElement;
			import flashx.textLayout.container.DisplayObjectContainerController;
			import flashx.textLayout.conversion.TextFilter;
			import flashx.textLayout.elements.TextFlow;
			import flashx.textLayout.edit.*;

			private var textContainor:Sprite;
			private var textFlow:TextFlow;

			[Embed(source="air.png")]
			[Bindable]
			static public var imgClass:Class;

			private static const textInput:XML= <TextFlow xmlns="http://ns.adobe.com/textLayout/2008">
					<div>
						<p>
							<img source="air.png"/>
							<span>Adobe® Flex® 3 是用于构建和维护在所有主要浏览器、桌面和操作系统一致地部署的极具表现力的 Web 应用程序的高效率的开放源码框架。 可以使用免费的 Flex SDK 构建 Flex 应用程序, 开发人员可以使用 Adobe Flex Builder™ 3 软件来显著促进开发。 60 天内免费试用 Flex Builder 3</span>
							<img source="air.png"/>
							<br/>
						</p>
					</div>
				</TextFlow>;

			public function init():void
			{
				textContainor=new Sprite();
				canvas.rawChildren.addChild(textContainor);
				textFlow=TextFilter.importToFlow(textInput, TextFilter.TEXT_LAYOUT_FORMAT);
				textFlow.flowComposer.addController(new DisplayObjectContainerController(textContainor, canvas.width, canvas.height));
				textFlow.addEventListener(StatusChangeEvent.INLINE_GRAPHIC_STATUS_CHANGED, picLoaded);
				textFlow.interactionManager = new SelectionManager();
				textFlow.interactionManager=new EditManager(new UndoManager());
				textFlow.interactionManager.setSelection(0, 0);
				textFlow.flowComposer.updateAllContainers();
			}

			private function picLoaded(event:StatusChangeEvent):void
			{
				//var image:InlineGraphicElement=event.element as InlineGraphicElement;
				textFlow.flowComposer.updateAllContainers();
			}

			public function insertImg():void
			{
				var editManager:IEditManager = textFlow.interactionManager as IEditManager;
				editManager.insertInlineGraphic(txtImgURL.text,100,100);
			}
			
			public function format():void {
				var editManager:IEditManager = textFlow.interactionManager as IEditManager;
				var charFormat:CharacterFormat = new CharacterFormat();
				//textFlow.interactionManager.setSelection(0,textFlow.
				charFormat.fontSize = 48;
				charFormat.fontStyle = flash.text.engine.FontPosture.ITALIC;
				charFormat.fontWeight = flash.text.engine.FontWeight.BOLD;
				//PopUpManager.
				//editManager.applyCharacterFormat(charFormat);
				//textFlow.removeChild(textFlow.getChildAtIndex(0));
				textFlow.characterFormat = charFormat;
				textFlow.flowComposer.updateAllContainers();
			}
		]]>
	</mx:Script>
	<mx:Canvas x="10"
			   y="10"
			   width="406"
			   height="287"
			   backgroundColor="#FFFFFF"
			   id="canvas">
	</mx:Canvas>
	<mx:TextInput x="70"
				  y="305"
				  width="268"
				  id="txtImgURL"/>
	<mx:Label x="10"
			  y="307"
			  text="图片URL:"/>
	<mx:Button x="346"
			   y="305"
			   label="插入图片"
			   id="btnInsertImg"
			   click="insertImg()"/>
	<mx:Button x="10" y="333" label="粗体" click="format()"/>

</mx:Application>

改造该示例以实现聊天窗口效果（纯属测试，无法实际应用）

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				layout="absolute"
				creationComplete="init()">
	<mx:Script>
		<![CDATA[
			import flash.utils.describeType;
			import flashx.textLayout.elements.FlowLeafElement;
			import flashx.textLayout.elements.SpanElement;
			import flashx.textLayout.elements.FlowElement;
			import flashx.textLayout.elements.ParagraphElement;
			import mx.controls.Alert;
			import flashx.textLayout.conversion.ConversionType;
			import mx.controls.Image;
			import mx.managers.PopUpManager;
			import flash.text.engine.FontPosture;
			import flashx.textLayout.formats.CharacterFormat;
			import flashx.textLayout.events.StatusChangeEvent;
			import flashx.textLayout.elements.InlineGraphicElement;
			import flashx.textLayout.container.DisplayObjectContainerController;
			import flashx.textLayout.conversion.TextFilter;
			import flashx.textLayout.elements.TextFlow;
			import flashx.textLayout.edit.*;

			private var textContainor:Sprite;
			private var textFlow:TextFlow;
			
			private var txtOutContainor:Sprite;
			private var txtOutFlow:TextFlow;
			
			[Embed(source="air.png")]
			[Bindable]
			static public var imgClass:Class;

			private static const textInput:XML= <TextFlow xmlns="http://ns.adobe.com/textLayout/2008">
					<div>
						<p>
							<img source="air.png"/>
							<span>Adobe® Flex® 3 是用于构建和维护在所有主要浏览器、桌面和操作系统一致地部署的极具表现力的 Web 应用程序的高效率的开放源码框架。 可以使用免费的 Flex SDK 构建 Flex 应用程序, 开发人员可以使用 Adobe Flex Builder™ 3 软件来显著促进开发。 60 天内免费试用 Flex Builder 3</span>
							<br/>
						</p>
					</div>
					<div>
						<p>
							<img source="air.png"/>
							<span>Adobe® Flex® 3 是用于构建和维护在所有主要浏览器、桌面和操作系统一致地部署的极具表现力的 Web 应用程序的高效率的开放源码框架。 可以使用免费的 Flex SDK 构建 Flex 应用程序, 开发人员可以使用 Adobe Flex Builder™ 3 软件来显著促进开发。 60 天内免费试用 Flex Builder 3</span>
							<br/>
						</p>
					</div>
				</TextFlow>;

			public function init():void
			{
				textContainor=new Sprite();
				canvas.rawChildren.addChild(textContainor);
				textFlow=new TextFlow();//TextFilter.importToFlow(textInput, TextFilter.TEXT_LAYOUT_FORMAT);
				textFlow.flowComposer.addController(new DisplayObjectContainerController(textContainor, canvas.width, canvas.height));
				textFlow.addEventListener(StatusChangeEvent.INLINE_GRAPHIC_STATUS_CHANGED, picLoaded);
				textFlow.interactionManager = new SelectionManager();
				textFlow.interactionManager=new EditManager(new UndoManager());
				textFlow.interactionManager.setSelection(0, 0);
				textFlow.flowComposer.updateAllContainers();
				
				txtOutContainor = new Sprite();
				cavOut.rawChildren.addChild(txtOutContainor);
				txtOutFlow = new TextFlow();
				txtOutFlow.flowComposer.addController(new DisplayObjectContainerController(txtOutContainor,cavOut.width,cavOut.height));
				txtOutFlow.addEventListener(StatusChangeEvent.INLINE_GRAPHIC_STATUS_CHANGED, imgLoaded);
				txtOutFlow.interactionManager = new SelectionManager();
				//txtOutFlow.interactionManager = new EditManager(new UndoManager());
				txtOutFlow.interactionManager.setSelection(0,0);
				txtOutFlow.flowComposer.updateAllContainers();
			}

			private function picLoaded(event:StatusChangeEvent):void
			{
				//var image:InlineGraphicElement=event.element as InlineGraphicElement;
				textFlow.flowComposer.updateAllContainers();
			}
			
			public function imgLoaded(event:StatusChangeEvent):void {
				txtOutFlow.flowComposer.updateAllContainers();
			}
			
			public function insertImg():void
			{
				var editManager:IEditManager = textFlow.interactionManager as IEditManager;
				editManager.insertInlineGraphic(txtImgURL.text,100,100);
			}
			
			public function format():void {
				var editManager:IEditManager = textFlow.interactionManager as IEditManager;
				var charFormat:CharacterFormat = new CharacterFormat();
				//textFlow.interactionManager.setSelection(0,textFlow.
				charFormat.fontSize = 48;
				charFormat.fontStyle = flash.text.engine.FontPosture.ITALIC;
				charFormat.fontWeight = flash.text.engine.FontWeight.BOLD;
				//PopUpManager.
				//editManager.applyCharacterFormat(charFormat);
				//textFlow.removeChild(textFlow.getChildAtIndex(0));
				textFlow.characterFormat = charFormat;
				textFlow.flowComposer.updateAllContainers();
			}
			
			public function showText():void {
				var xml:XML = TextFilter.export(textFlow,TextFilter.TEXT_LAYOUT_FORMAT,ConversionType.XML_TYPE) as XML;
				Alert.show(xml.toXMLString());
			}
			
			public function showOutText():void {
				var xml:XML = TextFilter.export(txtOutFlow,TextFilter.TEXT_LAYOUT_FORMAT,ConversionType.XML_TYPE) as XML;
				Alert.show(xml.toXMLString());
			}
			
			public function sendMsg():void {
				var leaf:FlowLeafElement = textFlow.getFirstLeaf();
				var p:ParagraphElement = new ParagraphElement();
				if(describeType(leaf).@name == "flashx.textLayout.elements::SpanElement") {
            		var spanElement1:SpanElement = new SpanElement();
            		spanElement1.text = (SpanElement(leaf)).text+"\n";
            		p.addChild(spanElement1);
            	} else if(describeType(leaf).@name == "flashx.textLayout.elements::InlineGraphicElement") {
            		var inlineGraphicElement1:InlineGraphicElement = new InlineGraphicElement();
            		inlineGraphicElement1.source = (InlineGraphicElement(leaf)).source;
            		p.addChild(inlineGraphicElement1);
            	}
            	txtOutFlow.addChild(p);
            	
	            while(leaf = leaf.getNextLeaf()) {
	            	p = new ParagraphElement();
	            	if(describeType(leaf).@name == "flashx.textLayout.elements::SpanElement") {
	            		var spanElement:SpanElement = new SpanElement();
	            		spanElement.text = (SpanElement(leaf)).text+"\n";
	            		p.addChild(spanElement);
	            	} else if(describeType(leaf).@name == "flashx.textLayout.elements::InlineGraphicElement") {
	            		var inlineGraphicElement:InlineGraphicElement = new InlineGraphicElement();
	            		inlineGraphicElement.source = (InlineGraphicElement(leaf)).source;
	            		p.addChild(inlineGraphicElement);
	            	}
                	Alert.show(describeType(leaf).@name);
				}
				txtOutFlow.addChild(p);
				txtOutFlow.flowComposer.updateAllContainers();
			}
		]]>
	</mx:Script>
	<mx:Canvas x="10"
			   y="10"
			   width="406"
			   height="287"
			   backgroundColor="#FFFFFF"
			   id="canvas">
	</mx:Canvas>
	<mx:TextInput x="70"
				  y="305"
				  width="268"
				  id="txtImgURL"/>
	<mx:Label x="10"
			  y="307"
			  text="图片URL:"/>
	<mx:Button x="346"
			   y="305"
			   label="插入图片"
			   id="btnInsertImg"
			   click="insertImg()"/>
	<mx:Button x="10" y="333" label="粗体" click="format()"/>
	<mx:Button x="66" y="333" label="得到文本" click="showText()"/>
	<mx:Canvas x="424" y="10" width="556" height="287" backgroundColor="#7EC0EA" id="cavOut">
	</mx:Canvas>
	<mx:Button x="645" y="305" label="得到文本" click="showOutText()"/>
	<mx:Button x="144" y="333" label="添加文本到右边" click="sendMsg()"/>

</mx:Application>

  

评论

5 楼 huyan0501 2011-07-04  

楼主你好！请问你现在是否实现了图片的拖拽功能？能交流一下吗？[e-mail]

4 楼 lionmusicyj 2010-05-29  

楼主，我在你说的地址上下载了framework，但是并没有你所说的
textLayout_conversion.swc、textLayout_core.swc、textLayout_edit.swc
这三个文件，只有简单的textLayout.swc，这是怎么回事呢？
问题很急，望回复

3 楼 唐朝 2009-06-01  

徐晶鑫 写道

怎么解决呢

1~5步骤你做了吗？

2 楼 徐晶鑫 2009-05-28  

怎么解决呢

1 楼 徐晶鑫 2009-05-28  

1046: 找不到类型，或者它不是编译时常数: FontMetrics。
1046: 找不到类型，或者它不是编译时常数: TextElement。
。。。。。。。。。。。。。。报了许多错