如何在Flex / Spark TextArea或TextFlow中的特定位置添加图像

发布时间：2020-12-15 01:49:12 所属栏目：百科来源：网络整理

导读：我有一个Spark TextArea： s:TextArea id="editor" s:textFlow s:TextFlow id="_tf" s:pLorem ipsum etc./s:p s:p s:img source="http://example.com/example.jpg" / /s:p s:pAliquam tincidunt tempor etc./s:p /s:TextFlow /s:textFlow/s:TextArea 还有一

我有一个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();
}

解决方法

使用此代码即可获得解决方案.

这里图像来自您的系统文件夹

protected function addImg_clickHandler(event:MouseEvent):void {
            _file_ref = new FileReference();
            _file_ref.addEventListener( Event.SELECT,handleFileSelect,false,true );
            var filter:FileFilter = new FileFilter("Images","*.jpg;*.gif;*.png");
            _file_ref.browse([filter]);
        }

        private function handleFileSelect(e:Event):void {
            _file_ref.removeEventListener( Event.SELECT,handleFileSelect );
            _file_ref.addEventListener(Event.COMPLETE,handleFileOpen,true );
            _file_ref.load();
        }

        private function handleFileOpen(e:Event):void {
            _file_ref.removeEventListener(Event.COMPLETE,handleFileOpen );
            var data:ByteArray = _file_ref.data as ByteArray;
            _img_loader= new Loader();
            _img_loader.loadBytes(data);
            _img_loader.contentLoaderInfo.addEventListener(Event.COMPLETE,imageLoadComplete,true);
        }

        protected function imageLoadComplete(e:Event):void{
            _img_loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,imageLoadComplete);
            var bmd:BitmapData=Bitmap(_img_loader.content).bitmapData;
            var bm:Bitmap=new Bitmap(bmd);  
            var em:EditManager = editorText.textFlow.interactionManager as EditManager;
            em.selectRange(editorText.selectionAnchorPosition,editorText.selectionActivePosition);
            em.insertInlineGraphic(bm,bm.width,bm.height);
            editorText.textFlow.flowComposer.updateAllControllers();
            editorText.setFocus();
        } 


        protected function addTable_clickHandler(event:MouseEvent):void
        {
            var tblement:TableElement = new TableElement();
            var em:EditManager = editorText.textFlow.interactionManager as EditManager;
            em.selectRange(editorText.selectionAnchorPosition,editorText.selectionActivePosition);
            em.insertTableElement(tblement);
            editorText.textFlow.flowComposer.updateAllControllers();
            editorText.setFocus();
        }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!