Bookmark and Share

If you are using RichEditableText component in Flex 4 for text layout and want to call actionscript methods within the texts, the old Flex 3 event handler “TextEvent.LINK” won’t work as it is using Text Layout Framework(TLF) now…

There are 2 ways of handling AS methods within RichEditableText component:

1. Use same old Flex 3 “event:myLinkEvent” in HTML “a” tag and add an event listener to RichEditableText.textFlow instead, it will return “myLinkEvent” as event type from example.

2. Add an event handler function to new “click” attribute in HTML “a” tag, it will always return “click” as event type.

Here is the complete example:

?View Code ACTIONSCRIPT
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

<?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" 
			   creationComplete="init()"
			   width="500" height="400">
	<fx:Script>
		<![CDATA[
			import flashx.textLayout.events.FlowElementMouseEvent;
 
			protected function init():void {
				myTxt.textFlow.addEventListener("myLinkEvent", onTextLink);
			}
 
			protected function onTextLink(e:FlowElementMouseEvent):void {
				myOutput.text = "Type: "+e.type;
			}
		]]>
	</fx:Script>
 
	<s:RichEditableText id="myTxt" editable="false" x="100" y="100">
		<s:content>
			<s:a href="http://www.google.com">Test link 1: open url</s:a><s:br/>
			<s:a href="event:myLinkEvent">Test link 2: call AS method with "myLinkEvent" type</s:a><s:br/>
			<s:a click="onTextLink(event)">Test link 3: call AS method with "click" type</s:a>
		</s:content>
	</s:RichEditableText>
 
	<s:Label id="myOutput" x="100" y="150" />
 
</s:Application>

Note that you need to set RichEditableText attribute “editable” to “false” in order for link to work.