Skip to main content
daslicht
daslicht
Known Participant
May 6, 2011
Answered

programmatically add hyperlink to TextFlow

  • May 6, 2011
  • 3 replies
  • 4640 views

Hello,

currently I add hyperlinks to a TextFlow the following way:

public function setHyperLink( linkInput:String ):void
{
     if (editor.selectionActivePosition != editor.selectionAnchorPosition)
     {
          var content:String = TextConverter.export(editor.textFlow , TextConverter.TEXT_LAYOUT_FORMAT, ConversionType.STRING_TYPE).toString();
          var selection:String = editor.text.substring(  editor.selectionAnchorPosition,editor.selectionActivePosition );
          var text:String = TextConverter.export( editor.textFlow, TextConverter.TEXT_LAYOUT_FORMAT, ConversionType.STRING_TYPE ).toString();
          var arr:Array = text.split( selection );               
          var output:String = arr[0]+"</span>" + 
                                        "<a href='"+linkInput+"' target='_blank'>" +
                             "<span>"+selection+"</span>"+
                         "</a>" +
                         "<span>"+arr[1];
               
          editor.textFlow = TextConverter.importToFlow( output, TextConverter.TEXT_LAYOUT_FORMAT );               
     }
}

This works fine until the selection:String is "2008", which leads to a incorect split since tghe markup String contans 2008:

"<TextFlow whiteSpaceCollapse="preserve" version="2.0.0" xmlns="http://ns.adobe.com/textLayout/2008">"

Anyone see another way to get the textflow before and after a certain position ?

Probably with "editor.textFlow.shallowCopy"  ? But than I have FlowElements.

But how to join those FlowElements and my hyperlink together as textflow ?

beforeLinkFlowElement + link + afterLinkFlowElement  ?

...

How do you add links in this demo:

http://labs.adobe.com/technologies/textlayout/demos/

?

[EDIT:]

ok found:

http://tourdeflex.adobe.com/flex4.0/TLF/srcview/index.html

I am going to study this now

[EDIT:]

Ok i found which is working, but how to set the default link color/look? There is no default after applying this function?

private function changeLink(urlText:String, targetText:String, extendToOverlappingLinks:Boolean):void

{

     if (activeFlow && activeFlow.interactionManager is IEditManager)

     {

          IEditManager(activeFlow.interactionManager).

           IEditManager(activeFlow.interactionManager).applyLink(urlText, targetText, extendToOverlappingLinks);

          activeFlow.interactionManager.setFocus();

     }

}

Those Interfaces make it quite hard to understand

This topic has been closed for replies.
Correct answer Jin-Huang

> textflow.linkNormalFormat.color = 0x00FFFF;

this is NOT working, try it yourself with the Application code I've posted

It will lead to a TypeError

[EDIT:]

Looks like thsi will only work if the source textflow marlup already include : " <linkNormalFormat color=\"#00ff00\" textDecoration=\"underline\" /> "

But that will lead again to the need to be able to set the linkNormalFormat.colour by not manipulationg the markup itself.


If you find the caller in tlf is null object, pls create it yourself.

tf.linkNormalFormat = new TextLayoutFormat();
tf.linkNormalFormat.color = 0xFF0000;

There are some attribute objects in TLF you need to handle it according to the specific case, such as textflow.interactionManager.

3 replies

R
Rosetta_Stone_Program
Participant
May 24, 2011

I say hello to the landlord, through Forum and I want to say something of my own views, sometimes when I registered some accounts, some validation makes me feel that when authors write better idiots, ask some strong regional issues, or very strong knowledge of issues that I cannot answer. Some idiot, let me fill in verification code when often the CAPTCHA fuzzy make me difficult to distinguish. I now hope that stupid fools for this site to buy a language learning tutorials, go back to learn the language. I'm sure those idiots is does not speak languages, this tutorial you can learn Japanese (<a href="

http://www.learnspanishabc.com/shopping/Rosetta-Stone-Rosetta-Stone-Japanese-31-671-1">

Rosetta Stone Japanese</a>) and Korean (<a href="http://www.learnspanishabc.com/shopping/Rosetta-Stone-Rosetta-Stone-Korean-31-672-1">

Rosetta Stone Korean</a>) Portugal language (<a href="http://www.learnspanishabc.com/shopping/Rosetta-Stone-Rosetta-Stone-Portuguese-31-674-1">

Rosetta Stone Portuguese</a>) Spain language (<a href="http://www.learnspanishabc.com/shopping/Rosetta-Stone-Rosetta-Stone-Spanish-31-676-1">

Rosetta Stone Spanish</a>), Russian (<a href="http://www.learnspanishabc.com/shopping/Rosetta-Stone-Rosetta-Stone-Russian-31-675-1">

Rosetta Stone Russian</a>) Poland (though<a href="http://www.learnspanishabc.com/shopping/Rosetta-Stone-Rosetta-Stone-Polish-31-673-1">

Rosetta Stone Polish</a>) drop towers and language (<a href="http://www.learnspanishabc.com/shopping/Rosetta-Stone-Rosetta-Stone-Tagalog-31-677-1">

Rosetta Stone Tagalog</a>), and so on, I'm sure can help you ...

daslicht
daslichtAuthor
Known Participant
May 10, 2011

J
Adobe Employee
Jin-Huang
Adobe Employee
May 9, 2011

I recommend you to use applyLink()

applyLink:

Transforms a selection into a link, or a link into normal text.

Executes an undoable operation that creates or removes the link.

If a target parameter is specified, it must be one of the  following values:

  • "_self"
  • "_blank"
  • "_parent"
  • "_top"

In browser-hosted runtimes, a target of "_self" replaces the current html  page. So, if the SWF content containing the link is in a page within a frame or  frameset, the linked content loads within that frame. If the page is at the top  level, the linked content opens to replace the original page. A target of  "_blank" opens a new browser window with no name. A target of "_parent" replaces  the parent of the html page containing the SWF content. A target of "_top"  replaces the top-level page in the current browser window.

In other runtimes, such as Adobe AIR, the link opens in the user's default  browser and the target parameter is ignored.

The extendToLinkBoundary parameter determines how the edit  manager treats a selection that intersects with one or more existing links. If  the parameter is true, then the operation is applied as a unit to  the selection and the whole text of the existing links. Thus, a single link is  created that spans from the beginning of the first link intersected to the end  of the last link intersected. In contrast, if extendToLinkBoundary were false in this situation, the existing partially selected links  would be split into two links.

Parameters

href:String — The uri referenced by the link.
targetString:String (default =  null) — The target browser window of the link.
extendToLinkBoundary:Boolean (default =  false) — Specifies whether to consolidate selection  with any overlapping existing links, and then apply the change.
operationState:SelectionState (default = null) — Specifies the text to which this  operation applies; if null, the operation applies to the current  selection.

Returns

LinkElement — The LinkElement that was created.

And the fourth paramter *SelectionState* means which characters are selected and then controls which characters will become a link.
SelectionState(root:flashx.textLayout.elements:TextFlow,  anchorPosition:int, activePosition:int, format:flashx.textLayout.formats:ITextLayoutFormat = null)

For example, new SelectionState(textflow,0,10) means the characters between the index 0 and the index 10. in "abcdefghijki", "abcdefghij" will be selected.

As to Link style, you can refer to http://forums.adobe.com/thread/800646?tstart=0

daslicht
daslichtAuthor
Known Participant
May 9, 2011

Hello,

ok looks like I am on the right way:

private function changeLink(urlText:String, targetText:String, extendToOverlappingLinks:Boolean):void
{
     var activeFlow:TextFlow = this.editor.textFlow;
     if (activeFlow && activeFlow.interactionManager is IEditManager)
     {
                    IEditManager(activeFlow.interactionManager).applyLink(urlText, targetText, extendToOverlappingLinks);               
                    activeFlow.interactionManager.setFocus();
/*
But how to set for the"activeFlow" the following properties:
                                 "<linkNormalFormat color=\"#00ff00\" textDecoration=\"underline\" />"+
                    "<linkHoverFormat color=\"#ff0000\" textDecoration=\"underline\" />"


*/
     }
}

Is there probaly a way to greate a global CSS ? or other template with options which apply for all textFlow globally ?

daslicht
daslichtAuthor
Known Participant
May 9, 2011

Hello,

Backgroud:

I have created a Flex based CMS which use the TLF to style its text.

You can dynamically add Flex content directly on the front end using my implemented Rich Text Editor.

The following example shows a RichText and a Textflow which I have hardcoded using a XML.

In the real application this TextFlow is stored in an MySQL database as a String.

Once a page is requested the String is converted back to TextFlow and loaded into the according RichText.

Question 1:

How would I apply:

<linkNormalFormat color=\"#00ff00\" textDecoration=\"underline\" />"

<linkHoverFormat color=\"#ff0000\" textDecoration=\"underline\" />

to the RichText "rt" ?

How to make this the default for all TextFlows?

...

When I save the content of a CMS page to the database, I convert the TextFlowas as a Stringand save it to the database.

Here my convert function:

public function convertTextFlowToString(textFlow:TextFlow):String 
{
     return TextConverter.export(textFlow, TextConverter.TEXT_LAYOUT_FORMAT, ConversionType.STRING_TYPE).toString(); 
}

...

Question 2:

As you can see, the TextFlow contains alot of overhead which would be the same for each CMS page.

Is there a way to put all same TextFlow properties in a kind of template, so that the redundancy could be reduced.

If something is unclear, tell me please.

Best Regards

Marc

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices