Skip to main content
Participating Frequently
October 2, 2010
Question

Runtime add link to text

  • October 2, 2010
  • 1 reply
  • 1300 views

hey frnds,

how to add runtime link to selected text from textarea by user and when user is again selecting that text then i  want to show assigned url of that text in textinput

where user can see which url is assigned to selected text. Then he can remove it also while removing url from textinput.

Its same like a TLFEditor where user can add or remove link to any text.
thx in advanced,
abhishekchess1@gmail.com
:)

This topic has been closed for replies.

1 reply

Adobe Employee
October 5, 2010

You can add a link to a text range using the IEditManager.applyLink function. Best way to get there is via textFlow.interactionManager, assuming the interactionManager was assigned to an IEditManager. You pass the source url for the link, and a few other things including (optionally) the text range. If you leave the text range blank it will apply to whatever is currently selected. To remove the link, pass in the text range for the link to the applyLink function with a null source url.

Doing a rollover effect is not too hard. You get the LinkElement that you created with the applyLink, and then add an event listener for FlowElementMouseEvent.ROLL_OVER and ROLL_OUT. When the ROLL_OVER event listener is called, you can put up your sticky, and when the ROLL_OUT is sent you remove the sticky.

Getting the LinkElement is harder than it should be, but you can do this:

textFlow.findLeafAtPosition(positionOfLinkStart).parent

Hope this helps,

- robin

Participating Frequently
October 5, 2010

Hey frnds,

this my code to add and remove link

<?xml version="1.0"?>

<!-- sparktextcontrols/CustomLinkElement.mxml -->

<s:Application

xmlns:fx="http://ns.adobe.com/mxml/2009"   

xmlns:mx="library://ns.adobe.com/flex/mx"    

xmlns:s="library://ns.adobe.com/flex/spark">

<s:layout>

<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>

</s:layout>

<fx:Script>

<![CDATA[

import flashx.textLayout.edit.EditManager;

import flashx.textLayout.edit.IEditManager;

import flashx.textLayout.edit.SelectionState;

import flashx.textLayout.elements.LinkElement;

import flashx.textLayout.elements.SpanElement;

import flashx.textLayout.events.FlowElementMouseEvent;

import flashx.textLayout.formats.TextLayoutFormat;

import flashx.textLayout.operations.CutOperation;

import mx.controls.Alert;

import mx.events.FlexEvent;

protected function button1_clickHandler(event:MouseEvent):void

{

// TODO Auto-generated method stub

var textFlow:TextFlow = editor.textFlow;

var editManager:IEditManager = textFlow.interactionManager as IEditManager;

editManager.applyLink( txtLink.text );

//Alert.show(String(editManager.getSelectionState().textFlow));

function removeLink(  ):void

{

var textFlow:TextFlow = editor.textFlow;

var editManager:EditManager = textFlow.interactionManager as EditManager;

editManager.applyLink( null, null, true );   

}

protected function editor_selectionChangeHandler(evt:FlexEvent):void {

var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,

editor.selectionAnchorPosition,

editor.selectionActivePosition);

}

]]>

</fx:Script>

<s:TextArea id="editor"

focusEnabled="true"

selectionChange="editor_selectionChangeHandler(event);">

<s:textFlow>

<s:TextFlow paragraphSpaceBefore="20">

<s:p>abhishek</s:p>

<s:p>abhishek2</s:p>

</s:TextFlow>

</s:textFlow>

</s:TextArea>

<s:TextInput id="txtLink"  />

<s:Button label="Add Link" click="button1_clickHandler(event)" />

<s:Button label="Remove Link" click="removeLink()" />

</s:Application>

what should i change in this to run code properly, means to apply and remove link for selcted text ?

thx in advanced,

Adobe Employee
October 5, 2010

Hmm.  Code worked for me.  I built it and was able to add and remove links as expected.  I'm using the 2.0 TLF code with Flex 4.0.

Note that you must make a block selection in order to apply the link.  The flex default for selection color seems to be transparent when I click in the txtLink text input.  There's probably a way to override that in flex.

Richard