How to simply append a sprite into a text area?

Question

How would I go about appending (not just changing the entire text area to this img, actually appending) a simple 25x25 image sprite into a text area in a flex project? using actionscript? (not mxml)

(it has to be a spark text area component, mostly because this is a flex mobile project and thats all thats optimized for mobile)

edit: I guess I should have said this, i know html text is the way to go about it. But my real confusion lies with first it being a Sprite, so i dont have a url to link to. It's an actual sprite var (it would be a file sent over the network in bytes, and saved in a sprite object.) and then the second part where im lost is APPENDING it to the text inline, so it doesnt replace any of the text already in the text area, and will be scrollable in the text area.

also, remember im trying to append this to a SPARK TEXT AREA component. I know i could just make a text field instance and thats it, but i cant find any information about appending this to a text area

EDIT AGAIN: SInce there was some confusion about the sprite im trying to append, this is how the image is being transmitted,

it's starting out as just a standard cameraphone image, then..

var fs:FileStream = new FileStream();
fs.open(new File(imageURL), FileMode.READ);
var bytes:ByteArray = new ByteArray();
fs.readBytes(bytes);
fs.close();
if (bytes == null) 
{
    trace("Image bytes is null!");

} 
else 
{
    var message:Object = new Object();
    message.type = "pic";
    message.bytes = bytes;
    netGroup.post(message);
    trace("Picture sent!");
}

Then i'm reciving it like this

var loaderContext:LoaderContext = new LoaderContext();
loaderContext.allowCodeImport = false;
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onPicLoaded,false,0,true);
loader.loadBytes(message.bytes, loaderContext);
// add a new sprite to hold image
imageSprite = new Sprite();
imageSprite.addChild(loader);

So then finally I have the image in imageSprite... and that brings us to my main problem appending this image in a TEXT AERA spark component. With an end result that will have the look of a picture message sent on an android or iphone.

Answer 1

I've done this before and it was a pain. The user would type and then click an image icon (like an emoticon) and it would "insert" into the text. All I was doing was breaking the currently focussed TextField, attaching the BitmapImage, and then start a new TextField at the end of the attached BitmapImage.

Steps:

• Create an array that stores your TextField and BitmapImage chunks.
• Every time you hear a backspace KeyUp, check to see if you are at the beginning of a TextField. If you're at the beginning of a TextField find that TextField in your array of chunks. If the previous chunk is a BitmapImage then find that BitmapImage, clear it along with the now empty TextField and then place the user's cursor at the end of the TextField chunk that was before the BitmapImage
• Revise and review. If you're human, there will be bugs.

You end up with what feels like a seamless TextField with "emoticon" integration. It's a hassle, but certainly works nice when you get it right.