Image 如何在Flex/Spark TextArea或TextFlow中的特定位置添加图像
我有一个火花区:Image 如何在Flex/Spark TextArea或TextFlow中的特定位置添加图像,image,apache-flex,textarea,insertion,flex-spark,Image,Apache Flex,Textarea,Insertion,Flex Spark,我有一个火花区: <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: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>
但只附加到文本流的末尾。如何在文本区域的活动插入符号处插入InlineGraphics元素?我的第一个想法是:
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()的对象。因此,如何在文本流的子段中插入文本中的INLINEGRICICICE元素(或者甚至替换文本)。< /P>
谢谢你的洞察力
更新:越来越近
我能够在一段的开头或结尾添加内容
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,0,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,false,0,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,false,0,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();
}
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,0,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,false,0,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,false,0,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();
}