如何在TextFlow中插入SpanElement?

时间:2012-03-30 05:27:59

标签: actionscript-3 flex

我希望能够在textarea中选择一些文本,然后用SpanElement替换所选文本。我不能使用TextLayoutFormat,因为它没有“id”属性。

如何在textarea中的特定位置插入范围?

2 个答案:

答案 0 :(得分:4)

有几种方法可以做到这一点。根据起始文本的结构,您可以使用简单的方法替换文本,或者您可能需要更通用的方法来处理许多场景。

两个想法,一个简单,一个接近通用解决方案。 很想看到其他方法,我总是在学习有关TLF的新知识:)

将TLF文本导出为String,进行替换,将String重新导入新的TLF TextFlow。

  1. 从Spark的textFlow属性中获取TextFlow 的TextArea /的TextInput
  2. 使用TextFlow.getText(0,-1,“< br />”)获取字符串表示
  3. 替换重新导入流程:看一下TextFlowUtil.importFromString
  4. 将上述步骤中的文本流应用回TextInput或TextArea textFlow财产。
  5. 这种方法可能效率不高。请注意,您也可能会松开应用于文本的任何样式。看一下TextConverter类,您也可以使用它将文本导入带有文本格式的TLF。特别是TextConvert.importToFlow()。

    使用TextFlow API获取包含文字的FlowElement。

    删除包含要替换的原始文本的元素,附加替换文本,附加结束文本。比上面的效率更高。请注意,如果您知道文本的确切结构,可以使这更简单...

    <强> [编辑]

    以下是两个例子:

    <?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"
                   width="800" height="600" xmlns:local="*">
    
        <fx:Script>
            <![CDATA[
                import flashx.textLayout.edit.ISelectionManager;
                import flashx.textLayout.elements.FlowElement;
                import flashx.textLayout.elements.TextFlow;
    
                import spark.utils.TextFlowUtil;
    
                private var flow:TextFlow;
                private var mgr:ISelectionManager;
                private var startIndex:int;
                private var endIndex:int;
    
                private function init():void
                {
                    flow = texty.textFlow;
                    mgr = flow.interactionManager;
                    if (mgr.hasSelection())
                    {
                        // determine start/end indexes of the selection
                        if (mgr.anchorPosition < mgr.activePosition)
                        {
                            startIndex = mgr.anchorPosition;
                            endIndex = mgr.activePosition;
                        }
                        else
                        {
                            startIndex = mgr.activePosition;
                            endIndex = mgr.anchorPosition;
                        }
                    }
                    else
                    {
                        startIndex = 0;
                        endIndex = 0;
                    }
                }
    
                private function replaceByImportText():void
                {
                    init();
                    if (mgr.hasSelection())
                    {
                        var copy:String = flow.getText(0,-1,"<br/>");
                        // replace the text
                        copy = copy.substring(0,startIndex) + "*** You just replaced me ***" + copy.substring(endIndex);
                        // reimport - expensive (makes a new TextFlow) and probably looses some fidelity (styles, etc)
                        texty.textFlow = TextFlowUtil.importFromString(copy);
                    }
                }
    
                private function replaceBySplittingFlowElements():void
                {
                    init();
                    if (mgr.hasSelection())
                    {
                        // each call to splitAtPosition leaves the text before startIndex in the original FlowElement
                        // and returns a new FlowElement (TextFlow's in this case) w/the remaining text
                        var textToBeReplaced:FlowElement = flow.splitAtPosition(startIndex);
                        // chops out whatever was between start/end indexes
                        var remainingTextToAddBack:TextFlow = textToBeReplaced.splitAtPosition(endIndex - startIndex) as TextFlow;
                        // insert replacment text
                        var span:SpanElement = new SpanElement();
                        span.text = "Hi, I'm a replacement String.";
                        // assumes last element is a paragraph but it could be a div :)
                        var lastParagraph:ParagraphElement = flow.getChildAt(flow.numChildren -1) as ParagraphElement;
                        if (lastParagraph)
                        {
                            lastParagraph.addChild(span);
                            // merge the last paragraph w/the 1st paragraph of remaining text
                            var firstP:ParagraphElement = remainingTextToAddBack.getChildAt(0) as ParagraphElement;
                            if (firstP)
                            {
                                lastParagraph.replaceChildren( lastParagraph.numChildren, lastParagraph.numChildren, getParagraphChildren(firstP) );
                            }
    
                        }
    
                    }
                }
    
                private function getParagraphChildren(p:ParagraphElement):Array
                {
                    var kids:Array =[];
                    var numKids:int = p.numChildren;
                    for (var i:int = 0; i<numKids; i++)
                    {
                        kids.push( p.getChildAt(i) );
                    }
                    return kids;
                }
    
            ]]>
        </fx:Script>
    
        <fx:Declarations>
            <!-- Place non-visual elements (e.g., services, value objects) here -->
        </fx:Declarations>
    
        <s:HGroup>
            <s:Button label="Replace by importing text" click="replaceByImportText()" />
            <s:Button label="Replace by using FlowElements" click="replaceBySplittingFlowElements()"/>
        </s:HGroup>
    
    
        <s:TextArea id="texty" top="40" left="40" right="40" bottom="40">
            <s:p>
                <s:span>
                    <s:text>
                        Bacon ipsum dolor sit amet turducken pancetta short ribs tail anim pig.
                        In pastrami in, ball tip flank shankle beef ribs spare ribs deserunt pancetta esse cupidatat aliquip venison pork chop.
                        Pork loin commodo corned beef ullamco culpa dolore occaecat, capicola adipisicing ribeye bresaola sunt est. 
                        Commodo labore culpa ut, sausage ad meatloaf adipisicing.
                    </s:text>
                </s:span>
                <s:br/>
            </s:p>
    
            <s:p>
                <s:span>
                    <s:text>
                        Quis qui aliqua enim, rump jerky aute bresaola aliquip pig speck short loin.
                        Non ea eiusmod shoulder, consequat enim ribeye sed. Meatloaf tenderloin pork loin reprehenderit.
                        Enim rump eiusmod, tri-tip capicola in do frankfurter dolore.
                        Culpa elit meatball pariatur turducken, leberkas excepteur irure in pork belly shank consequat.
                        Sint biltong t-bone veniam shankle. Consectetur irure et minim.
                    </s:text>
                </s:span>
                <s:br/>
            </s:p>
    
            <s:p>
                <s:span>
                    <s:text>
                        Excepteur laborum non corned beef, est dolore pastrami jowl id.
                        Leberkas short ribs ham, tempor id sed esse. Officia eiusmod pork frankfurter leberkas cow, nisi qui filet mignon mollit swine bacon veniam.
                        Nostrud deserunt nulla ground round, shankle sausage aliqua ut frankfurter culpa.
                        Veniam hamburger spare ribs, ullamco dolor labore salami capicola short loin swine.
                    </s:text>
                </s:span>
            </s:p>
    
        </s:TextArea>
    </s:Application>
    

答案 1 :(得分:3)

我想贡献一些代码,因为我从这里创建了一些代码,也因为几乎没有关于“splitAtPosition”方法的示例或文档。

此代码将在文本流(文本流)中的任何位置(索引)插入FlowElement(flowElement) - 记得在运行函数后运行textflow.flowComposer.updateAllControllers();

private function insertFlowElementInTextFlowAt(textflow:TextFlow,index:int,flowElement:FlowElement):void{

    var part2:TextFlow = textflow.splitAtPosition(index) as TextFlow;
    var part2_firstPara:ParagraphElement = part2.getChildAt(0) as ParagraphElement;     
    var textflow_lastPara:ParagraphElement = textflow.getChildAt(textflow.numChildren -1) as ParagraphElement;  



    if (textflow.textLength == index){

        part2_firstPara.addChildAt(0,flowElement);
        textflow.replaceChildren(textflow.numChildren,textflow.numChildren,getFlowElementChildren(part2,0))

    }else if(index < textflow.textLength){

        textflow_lastPara.addChild(flowElement);
        textflow_lastPara.replaceChildren( textflow_lastPara.numChildren, textflow_lastPara.numChildren, getFlowElementChildren(part2_firstPara));
        textflow.replaceChildren(textflow.numChildren,textflow.numChildren,getFlowElementChildren(part2,1))

    }



}

private function getFlowElementChildren(p:FlowGroupElement,start:int=0):Array
{
    var kids:Array = new Array();
    for (var i:int = start; i<p.numChildren; i++){
        kids.push( p.getChildAt(i) );
    }
    return kids;
}