image - Flex/Spark TextArea または TextFlow の特定の場所に画像を追加する方法

Question

私は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>

そして、画像を追加するボタン:

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

次のスクリプトが機能します。

    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();
    }

ただし、TextFlow の最後にのみ追加されます。TextArea のアクティブなキャレットに InlineGraphicElement を挿入するにはどうすればよいですか? 私の最初の考えは次のようなものです：

    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();
    }

しかし、現在の段落を .addChild() のオブジェクトとして見つけることさえできると仮定すると、これはまだ現在の段落の最後にのみ追加されます。では、TextFlow オブジェクトの子段落のテキストの途中に InlineGraphicElement を挿入する (またはテキストを置き換える) にはどうすればよいでしょうか。

あなたの洞察に感謝します。

更新: 近づいています。

段落の先頭または末尾に追加できます。

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();
}

しかし、まだ真ん中に挿入する喜びはありません。また、上記のコードは強調表示されたテキストを置き換えませんが、それはここでの本当の問題ではありません。

---

解決：

Eugene のリンクに基づくと、これの鍵は EditManager です。

次のコードは、作業中の更新された関数を表しています。

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();
}