How to add an image at a specific location in Flex/Spark TextArea or TextFlow

Question

I have a Spark TextArea:

<s:TextArea id="editor">
    <s:textFlow>
        <s:TextFlow id="_tf" >
            <s:p>Lorem ipsum etc.</s:p>
            <s:p>
                 <s:img source="http://example.com/example.jpg" />
             </s:p>
            <s:p>Aliquam tincidunt tempor etc.</s:p>
        </s:TextFlow>
    </s:textFlow>
</s:TextArea>

And a button to add an image:

<s:Button id="imageBtn" 
    label="insert image" 
    width="89"
    click="imageBtn_clickHandler(event);" />

The following script works:

    import flashx.textLayout.elements.*;

    import mx.events.FlexEvent;

    protected function imageBtn_clickHandler(evt:MouseEvent):void {
        var img:InlineGraphicElement = new InlineGraphicElement();
        img.source = "http://example.com/example.jpg";

        var p:ParagraphElement = new ParagraphElement();
        p.addChild(img);
        _tf.addChild(p);
        _tf.flowComposer.updateAllControllers();
        editor.setFocus();
    }

but only appends to the end of the TextFlow. How can I insert the InlineGraphicElement at the active caret in the TextArea? My first thought is something like:

    import flashx.textLayout.elements.*;

    import mx.events.FlexEvent;

    protected function imageBtn_clickHandler(evt:MouseEvent):void {
        var img:InlineGraphicElement = new InlineGraphicElement();
        img.source = "http://example.com/example.jpg";

        var p:ParagraphElement;
    //pseudocode
    p = _tf.getCaret.AncestorThatIsParagraphElement;
    // end pseudocode
    p.addChild(img);
        _tf.flowComposer.updateAllControllers();
        editor.setFocus();
    }

But this still would only append at the end of the current paragraph, assuming I could even find the current paragraph as an object to .addChild() with. So how can I insert the InlineGraphicElement in the middle of text (or even replacing text) in a child paragraph of a TextFlow object.

Thanks for your insight.

UPDATE: Getting closer.

I'm able to add to the beginning or end of a paragraph.

protected function imageBtn_clickHandler(evt:MouseEvent):void {
    var img:InlineGraphicElement = new InlineGraphicElement();
    img.source = "http://example.com/example.jpg";
    var insertInto:ParagraphElement = new ParagraphElement();
    insertInto = editor.textFlow.getChildAt(
        editor.textFlow.findChildIndexAtPosition(
            editor.selectionAnchorPosition
        )).getParagraph();
    insertInto.addChildAt(0, img); // inserts at beginning of paragraph
    insertInto.addChildAt(1, img); // inserts at end of paragraph

    _tf.flowComposer.updateAllControllers();
    editor.setFocus();
}

But still no joy in inserting into the middle. Also, the above code wouldn't replace highlighted text, but that's not the real concern here.

---

SOLUTION:

Based on Eugene's link the key to this is EditManager.

The following code represents the working updated function:

protected function imageBtn_clickHandler(evt:MouseEvent):void {
    var em:EditManager = editor.textFlow.interactionManager as EditManager;
    em.selectRange(editor.selectionAnchorPosition, editor.selectionActivePosition);
    em.insertInlineGraphic("http://example.com/example.jpg","auto","auto");
    _tf.flowComposer.updateAllControllers();
    editor.setFocus();
}

Answer 1

here is your solution