在RichEditableText的LinkElement上添加自定义函数

在Flex中,如何实现在一段文字上某部分字符上显示超链接,点击后显示自定义操作呢?如下:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/11/setting-text-in-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_text_test"
			   xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:local="*">
	
	<fx:Script>
		<![CDATA[
			import flashx.textLayout.conversion.TextConverter;
			import flashx.textLayout.elements.FlowElement;
			import flashx.textLayout.elements.FlowGroupElement;
			import flashx.textLayout.elements.LinkElement;
			import flashx.textLayout.elements.TextFlow;
			import flashx.textLayout.events.FlowElementMouseEvent;
			
			import mx.controls.Alert;
			
			import spark.utils.TextFlowUtil;
			
			protected function button1_clickHandler(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				var d:String = '<p>The quick brown <span color="#ff0000">fox jumps over</span> the lazy dogg.</p>';
				richTxt.textFlow = TextFlowUtil.importFromString(d);
			}
			
			private function handleClickEvent(e:FlowElementMouseEvent):void {
				Alert.show("dd");
			}   
			
			protected function button2_clickHandler(event:MouseEvent):void
			{
				var d:String = '<p>Search for product info on <a click="handleClickEvent(event)">Google</a></p>';
				richTxt2.textFlow = TextConverter.importToFlow(d, TextConverter.TEXT_FIELD_HTML_FORMAT);
			}
			
			protected function button3_clickHandler(event:MouseEvent):void
			{
				var d:String = '<p>Search for product info on <a>Google</a></p>';
				//richTxt2.textFlow = TextConverter.importToFlow(d, TextConverter.TEXT_FIELD_HTML_FORMAT);
				richTxt3.textFlow = addLinkClickHandler(d, handleClickEvent);
			}
			
			/**
			 * Converts the html string (from the resources) into a TextFlow object
			 * using the TextConverter class. Then it iterates through all the 
			 * elements in the TextFlow until it finds a LinkElement, and adds a 
			 * FlowElementMouseEvent.CLICK event handler to that Link Element.
			 */
			public static function addLinkClickHandler(html:String, 
													   linkClickedHandler:Function):TextFlow {
				var textFlow:TextFlow = TextConverter.importToFlow(html, 
					TextConverter.TEXT_FIELD_HTML_FORMAT);
				var link:LinkElement = findLinkElement(textFlow);
				if (link != null) {
					link.addEventListener(FlowElementMouseEvent.CLICK, 
						linkClickedHandler, false, 0, true);
				} else {
					trace("Warning - couldn't find link tag in: " + html);
				}
				return textFlow;
			}
			
			/**
			 * Finds the first LinkElement recursively and returns it.
			 */
			private static function findLinkElement(group:FlowGroupElement):LinkElement {
				var childGroups:Array = [];
				// First check all the child elements of the current group,
				// Also save any children that are FlowGroupElement
				for (var i:int = 0; i < group.numChildren; i++) {
					var element:FlowElement = group.getChildAt(i);
					if (element is LinkElement) {
						return (element as LinkElement);
					} else if (element is FlowGroupElement) {
						childGroups.push(element);
					}
				}
				// Recursively check the child FlowGroupElements now
				for (i = 0; i < childGroups.length; i++) {
					var childGroup:FlowGroupElement = childGroups[i];
					var link:LinkElement = findLinkElement(childGroup);
					if (link != null) {
						return link;
					}
				}
				return null;
			}
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<fx:String id="htmlTextAsMarkup"><![CDATA[<p>The quick brown <span fontWeight="bold">fox jumps over</span> the lazy dogg.</p>]]></fx:String>
	</fx:Declarations>	

	<s:RichText id="richTxt"
				horizontalCenter="0" verticalCenter="0" />
	<s:Button x="34" y="32" label="richtext" click="button1_clickHandler(event)"/>
	
	<s:RichEditableText top="70" editable="false" focusEnabled="false"  id="richTxt2">
	</s:RichEditableText>
	<local:HtmlLabel id="richTxt3" top="100">
		
	</local:HtmlLabel>
	<s:Button x="130" y="32" label="RichEditableText" click="button2_clickHandler(event)"/>
	<s:Button x="258" y="32" label="htmlLabel" click="button3_clickHandler(event)"/>
	
</s:Application>

 以下是HtmlLabel的定义内容:

<?xml version="1.0" encoding="utf-8"?>
<s:RichEditableText xmlns:fx="http://ns.adobe.com/mxml/2009"
					xmlns:s="library://ns.adobe.com/flex/spark"
					xmlns:mx="library://ns.adobe.com/flex/mx"
					focusEnabled="false"
					selectable="false"
					editable="false">
	
	<fx:Script>
		<![CDATA[
			import flashx.textLayout.conversion.TextConverter;
			
			override public function set text(value:String):void {
				super.textFlow = TextConverter.importToFlow(value, 
					TextConverter.TEXT_FIELD_HTML_FORMAT);
			}
		]]>
	</fx:Script>
	
</s:RichEditableText>

 运行后,界面如下所示:



 点击“Google"即弹出对话框,完成了自定义操作的实现。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值