Well, this is most likely not exactly the solution you are looking for, because my solution focuses on the standard TextField core class, and not on a specific Flex component. But I think, looking at the code, you should understand what is happening and pass it on to the component.
Basically what I did is that I always check where the current cursor uses the selection, then I get the response lines and draw a selection in the background highlighting the current lines. Please note that I did this quite easily, just relying on one font, so the line height will always be the same. However, you can do this job for different fonts in the same text field by using the class TextLineMetricsand more accurately calculating the actual offsets. Since this is a lot more work, and highlighting probably only makes sense for one font environment, I left it. In my example below, Courier is used, but it should automatically work with any font of any size.
package
{
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import flash.text.TextField;
import flash.text.TextFieldType;
import flash.text.TextFormat;
import flash.text.TextLineMetrics;
public class HighlightedTextField extends Sprite
{
private var textField:TextField;
private var highlighter:Shape;
private var metrics:TextLineMetrics;
private var selectionBegin:int = -1;
private var selectionEnd:int = -1;
private var lineBegin:int = -1;
private var lineEnd: int = -1;
public function HighlightedTextField()
{
this.graphics.beginFill( 0xEEEEEE );
this.graphics.drawRect( 5, 5, 290, 290 );
this.graphics.endFill();
textField = new TextField();
textField.width = 280;
textField.height = 280;
textField.x = 10;
textField.y = 10;
textField.background = false;
textField.selectable = true;
textField.multiline = true;
textField.defaultTextFormat = new TextFormat( 'Courier', 12 );
textField.type = TextFieldType.INPUT;
highlighter = new Shape();
highlighter.graphics.beginFill( 0xCCCCCC );
highlighter.graphics.drawRect( 0, 0, textField.width, 1 );
highlighter.x = textField.x;
highlighter.y = textField.y;
this.addChild( highlighter );
this.addChild( textField );
this.addEventListener( Event.ENTER_FRAME, setHighlighter );
metrics = textField.getLineMetrics( 0 );
setHighlighter( null );
}
private function setHighlighter ( event:Event ):void
{
var changed:Boolean = false;
if ( selectionBegin != textField.selectionBeginIndex )
{
selectionBegin = textField.selectionBeginIndex;
lineBegin = textField.getLineIndexOfChar( selectionBegin );
lineBegin = lineBegin != -1 ? lineBegin : textField.numLines - 1;
changed = true;
}
if ( selectionEnd != textField.selectionEndIndex )
{
selectionEnd = textField.selectionEndIndex;
lineEnd = textField.getLineIndexOfChar( selectionEnd );
lineEnd = lineEnd != -1 ? lineEnd : textField.numLines - 1;
changed = true;
}
if ( changed )
{
highlighter.y = textField.y + metrics.height * lineBegin + 2;
highlighter.height = textField.y + metrics.height * ( lineEnd + 1 ) + 2 - highlighter.y;
}
}
}
}
You can also see this solution on Wonderfl along with a working demo.