Wie füge ich ein SpanElement in einen TextFlow ein?

Question

Ich möchte die Möglichkeit, einen Text in einem Textfeld auszuwählen und dann den ausgewählten Text durch ein SpanElement ersetzen. Ich kann ein TextLayoutFormat nicht verwenden, da es keine "ID" -Eigenschaft hat.

Wie füge ich einen Bereich an einer bestimmten Stelle in einem Textfeld ein?

Answer 1

Es gibt mehrere Möglichkeiten, dies zu tun. Abhängig von der Struktur Ihres Ausgangstexts können Sie einen einfachen Ansatz verwenden, um den Text zu ersetzen, oder Sie benötigen möglicherweise einen allgemeineren Ansatz, der viele Szenarien bewältigen kann.

Zwei Ideen, eine einfache und eine, die sich der generischen Lösung nähert. Würde gespannt sein, andere Ansätze zu sehen, ich bin immer wieder neue Dinge über TLF :) Lernen

Export des TLF-Text in einen String, tun Sie Ihrem ersetzen, den String in ein neues TLF Textflow neu importieren.

1. Holen Sie sich das Textflow aus der textFlow Eigenschaft einer Spark TextArea-/TextInput-
2. Verwenden TextFlow.getText (0, -1, "< br/>"), um die String-Darstellung
3. Do zu bekommen Ersetzen Sie den Fluss erneut importieren: Sehen Sie sich TextFlowUtil.importFromString an
4. Wenden Sie den Textfluss aus dem obigen Schritt auf die Eigenschaft textFlow des TextInput- oder TextAreas-Objekts an.

Dieser Ansatz ist wahrscheinlich nicht der effizienteste. Beachten Sie, dass Sie wahrscheinlich auch alle auf den Text angewendeten Stile verlieren. Sehen Sie sich die TextConverter-Klasse an, mit der Sie auch Text in TLF mit einem Textformat importieren können. Insbesondere TextConvert.importToFlow().

Verwenden Sie die TextFlow-APIs, um FlowElement-Elemente zu erhalten, die Ihren Text enthalten.

Entfernen Sie die Elemente, die den zu ersetzenden Originaltext enthalten, fügen Sie den Ersetzungstext an, fügen Sie den Endtext an. Effizienter als die oben genannten. Beachten Sie, wenn Sie die genaue Struktur des Textes wissen, könnten Sie dies viel einfacher machen ...

[Bearbeiten]

Hier ist ein Beispiel, das sowohl tut:

<?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> 

Answer 2

Ich wollte etwas Code beizusteuern, da ich meins aus dem hier erstellt habe und auch, weil es fast keine Beispiele oder Dokumentation über die "splitAtPosition" -Methode gibt.

Dieser Code wird ein Flowelement (Flowelement) an einer beliebigen Stelle (Index) in einem Textfluss (Textfluss) einfügen - erinnern textflow.flowComposer.updateAllControllers(); nach dem Ausführen der Funktion auszuführen:

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