TextArea - Insert an image at user selected position

Jin-Huang, thanks for the offer!

The following is the code for sample application that will allow you to explore what I'm talking about:

(I've also attached math.png that you can download and add to the project's assets folder as: assets/images/math.png)

<?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/mx"
    minWidth="955" minHeight="600"
    creationComplete="application1_creationCompleteHandler(event)"
    >
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:layout>
        <s:VerticalLayout
            horizontalAlign="center"
            paddingTop="20"
            />
    </s:layout>
   
    <s:TextArea
        id="richText"
        width="800"
        height="300"
        horizontalCenter="0"
        verticalCenter="0"
        textFlow="{textFlow}"
        selectionChange="richText_selectionChangeHandler(event)"
        />
    <s:Button
        id="addImageButton"
        label="Add image"
        click="addImageButton_clickHandler(event)"
        />

    <fx:Script>
        <![CDATA[
            import flashx.textLayout.elements.InlineGraphicElement;
            import flashx.textLayout.elements.ParagraphElement;
            import flashx.textLayout.elements.TextFlow;
            import flashx.textLayout.formats.WhiteSpaceCollapse;
           
            import mx.events.FlexEvent;
           
            import spark.utils.TextFlowUtil;

            [Bindable]
            private var inputString:String = "The Dow Jones industrial average lost more than 100 points Tuesday after Japan raised the severity of its nuclear crisis and Alcoa Inc. reported disappointing sales. A drop in oil prices pulled down energy stocks.";
            [Bindable]
            private var textFlow:TextFlow;
            private var position:int;
           
            private var imagePath:String = "assets/images/math.png";

            protected function application1_creationCompleteHandler(event:FlexEvent):void {
                textFlow =
                    TextFlowUtil.importFromXML(XML(inputString), WhiteSpaceCollapse.PRESERVE);
            }

            protected function richText_selectionChangeHandler(event:FlexEvent):void {
                position = richText.selectionAnchorPosition;
            }
           
           
            protected function addImageButton_clickHandler(event:MouseEvent):void {
                insertImage(imagePath, position);
            }
           
           
            protected function insertImage(name:String, position:int):void{
                var p:ParagraphElement = new ParagraphElement();
                var image:InlineGraphicElement = new InlineGraphicElement();
                image.source = name;
               
                p.addChild(image);
               
                // the following call adds the image at the end of the content in textFlow
                textFlow.addChild(p);

                // instead of calling addChild, I would like to call some method that would
                // allow me to add the image at 'position'

                // also, how can I add an image to content without needing to create a new paragraph
               
               
            }

        ]]>
    </fx:Script>
</s:Application>