3 Replies Latest reply on Jan 20, 2010 7:15 AM by Handycam

    Format link color in RichText?

    Handycam Level 1

      I have done this in the past, using the tip I got here, repeated here (thanks, Peter).

       

      However, in this case I am trying to build a re-usable RichEditableText component using s:span and a:a tags, and I can't figure out how to combine the two approaches to change the hyperlinks to a different color. It works fine, except the link is always blue.

       

      <?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/halo" 
                               xmlns:mx1="library://ns.adobe.com/flex/mx" xmlns:comp="com.*"
                               editable="false" color="#cccccc" columnCount="3" paragraphSpaceAfter="6" 
                               width="100%" height="100%" paddingTop="20" paddingLeft="20" paddingBottom="20" paddingRight="20" >
      
           <fx:Script>
                <![CDATA[
                     
                     import flashx.textLayout.conversion.TextConverter;
                     import flashx.textLayout.elements.*;
                     import flashx.textLayout.formats.TextDecoration;
                     import flashx.textLayout.formats.TextLayoutFormat;
                     
                     
                     [Bindable] public var person:String;
                     [Bindable] public var company:String;
                     [Bindable] public var link:String;
                     
                     private function configLinks():void {
                          var cfg:Configuration = TextFlow.defaultConfiguration;
                          
                          var normalTLF:TextLayoutFormat = new TextLayoutFormat(cfg.defaultLinkNormalFormat);
                          normalTLF.color = 0xFF8800;
                          
                          var hoverTLF:TextLayoutFormat = new TextLayoutFormat(cfg.defaultLinkHoverFormat);
                          hoverTLF.color = 0xE69D39;
                          hoverTLF.textDecoration = TextDecoration.NONE;
                          
                          var activeTLF:TextLayoutFormat = new TextLayoutFormat(cfg.defaultLinkActiveFormat);
                          activeTLF.color = 0xF06D1E;
                          
                          cfg.defaultLinkNormalFormat = normalTLF;
                          cfg.defaultLinkHoverFormat = hoverTLF;
                          cfg.defaultLinkActiveFormat = activeTLF;
                     }
                     
                ]]>
           </fx:Script>
           
                <s:content>
                     <s:p>
                          <s:span fontSize="18" fontWeight="bold">{person}</s:span><s:br/>
                          <s:span fontStyle="italic">{company}</s:span><s:br/>
                          <s:a href="http://{link}" color="#990000">{link}</s:a>
                     </s:p>
                </s:content>
           
      </s:RichEditableText>
      
      
        • 1. Re: Format link color in RichText?
          Carol L. Frampton Level 2

          You have 2 choices.  You can set the link formats for each LinkElement or you can import your text to a text flow using

           

              TextConverter.importToFlow(markup, TextConverter.TEXT_LAYOUT_FORMAT, cfg);

           

          which will use your modified configuration for setting the default link styles in the textFlow.

           

          To set the link formats for each link element add initialize="configLinks()" to RichEditableText.

           

          Change configLinks() to

           

                      private function configLinks():void {
                          var normalTLF:TextLayoutFormat = new TextLayoutFormat();
                          normalTLF.color = 0xFF8800;
                         
                          var hoverTLF:TextLayoutFormat = new TextLayoutFormat();
                          hoverTLF.color = 0xE69D39;
                          hoverTLF.textDecoration = TextDecoration.NONE;
                         
                          var activeTLF:TextLayoutFormat = new TextLayoutFormat();
                          activeTLF.color = 0xF06D1E;
                                         
                          mylink.linkNormalFormat = normalTLF;
                          mylink.linkHoverFormat = hoverTLF;
                          mylink.linkActiveFormat = activeTLF;
                      }

           

          and add an id tag to your link element so you can reference it in configLinks()

           

                      <s:content>
                          <s:p>
                              <s:span fontSize="18" fontWeight="bold">{person}</s:span><s:br/>
                              <s:span fontStyle="italic">{company}</s:span><s:br/>
                              <s:a id="mylink" href="http://{link}" color="#990000">{link}</s:a>
                          </s:p>
                      </s:content>      

          • 2. Re: Format link color in RichText?
            Carol L. Frampton Level 2

            Alternatively, inline it would be:

             

                    <s:content>
                        <s:p>
                            <s:linkHoverFormat>
                                <s:TextLayoutFormat color="#E69D39" textDecoration="none"/>
                            </s:linkHoverFormat>
                            <s:linkNormalFormat>
                                <s:TextLayoutFormat color="#FF8800"/>
                            </s:linkNormalFormat>
                            <s:linkActiveFormat>
                                <s:TextLayoutFormat color="#F06D1E"/>
                            </s:linkActiveFormat>
                            <s:span fontSize="18" fontWeight="bold">{person}</s:span><s:br/>
                            <s:span fontStyle="italic">{company}</s:span><s:br/>
                            <s:a id="mylink" href="http://{link}" color="#990000">{link}</s:a>
                        </s:p>
                    </s:content>

            • 3. Re: Format link color in RichText?
              Handycam Level 1

              Now THAT is very handy to know!  Thanks, Carol.  I find a lot of things

              easier to organize in mxml.

               

              For this project, I was fortunate that it was ok if ALL rich text objects

              had the same format, so I used Peter's tutorial.  But the ones you've posted

              will be invaluable when I need to target specific text objects.

               

              Thanks again.