SpanElementをTextFlowに挿入するにはどうすればよいですか？

Question

テキストエリアのテキストを選択して、選択したテキストをSpanElementに置き換えることができます。 TextLayoutFormatは "id"プロパティを持たないため使用できません。

テキストエリア内の特定の位置にスパンを挿入するにはどうすればよいですか？

Answer 1

これを行う方法はいくつかあります。開始テキストの構造に応じて、単純なアプローチでテキストを置き換えることができます。また、多くのシナリオを処理できるより汎用的なアプローチが必要な場合もあります。

2つのアイデア、1つはシンプル、もう1つはジェネリックソリューションに近づいています。 は、あなたの新しいTLFののTextFlowに文字列を再インポートし、交換するか、

:)私はいつもTLFについて新しいことを学んでいる、StringにTLFテキストのエクスポート、他のアプローチを見て好奇心だろう。

1. String表現
2. ドを取得するために
3. 使用TextFlow.getText（0、-1、 "< BR/>に"） のTextArea/TextInputの
スパークの textFlowプロパティからのTextFlowを取得代入フローを再インポートする：TextFlowUtil.importFromStringを見てください
4. 上記のステップのテキストフローをTextInputまたはTextAreaの textFlowプロパティに適用します。

このアプローチはおそらく最も効率的ではありません。テキストに適用されているスタイルも緩んでいる可能性があることに注意してください。 TextConverterクラスを見てください.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> 

Answer 2

：ここ

[編集]

の両方を行う例です...あなたは、あなたのテキストの正確な構造を知っていれば、あなたはこれをはるかに簡単にすることができ、注意してください私がここから作成したものであり、 "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; 
}