How do I insert a SpanElement in a TextFlow?

Question

I want the ability to select some text in a textarea and then replace the selected text with a SpanElement. I cannot use a TextLayoutFormat because it doesn't have an "id" property.

How do I insert a span in a specific position in a textarea?

Sunil D. · Accepted Answer

There are several ways to go about doing this. Depending on the structure of your starting text, you can do a simple approach to substitute the text, or you might need a more generic approach that can handle many scenarios.

Two ideas, one simple, and one that approaches the generic solution. Would be curious to see other approaches, I'm always learning new things about TLF :)

Export the TLF text to a String, do your replace, reimport the String into a new TLF TextFlow.

Get the TextFlow from the textFlow property of a Spark TextArea/TextInput
Use TextFlow.getText(0, -1, "
") to get the String representation
Do the substitution Re-import the flow: Have a look at TextFlowUtil.importFromString
Apply the text flow from the above step back to the TextInput or TextArea's textFlow property.

This approach is probably not the most efficient. Note you are also likely to loose any styles applied to the text. Take a look at the TextConverter class, which you can also use to import text into TLF w/a text format. In particular, TextConvert.importToFlow().

Use the TextFlow API's to get at the FlowElement's that contain your text.

Remove the elements that contain the original text to be replaced, append the replacement text, append the ending text. More efficient than the above. Note, if you know the exact structure of your text, you could make this much simpler...

[Edit]

Here's an example that does both:




    
        ");
                    // 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
    

    
        
    

    
        
        
    


    
        
            
                
                    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.
                
            
            
        

        
            
                
                    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.
                
            
            
        

        
            
                
                    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.

How do I insert a SpanElement in a TextFlow?

Answers (2)

Related Questions