How to add box around text in s:TextArea?

Question

Hi,
What I want to do is I want a red box to appear around some text in my s:TextArea, which is editable.
Well, I can add a red box by putting the following after my text area.
  <s:Graphic>
    <s:Rect x="20" y="110" width="20" height="20" >
         <s:stroke>
              <s:SolidColorStroke color="0xFF8888"/>
         </s:stroke>
    </s:Rect>
  </s:Graphic>
However the user will edit the text, and the text position will change. Also the user will scroll the text area up and down.
So the location of the box should move to still be located around the text.
How can I track the position of the text? Is this a good idea? to track the position of the text and to keep moving the box to keep it on top of the text?
Thanks, Philip

Answer 1

Philip,
How about something like this?
<?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/halo">
    <s:TextArea id="txtArea"
            horizontalCenter="0" verticalCenter="0">
        <s:content>
            <s:p>The quick brown fox jumps <s:span backgroundColor="0xFF0000" backgroundAlpha="0.8">over</s:span> the lazy dog.</s:p>
        </s:content>
    </s:TextArea>
</s:Application>
Peter