Adobe Flex 3 ヘルプ

テキストの選択と修正

TextAreaTextInput、および RichTextEditor コントロール内のテキストを選択および修正できます。Label または Text コントロールのテキストを変更するには、コントロールの text または HTMLtext プロパティに、新規の値を割り当てます。HTMLText プロパティの詳細については、htmlText プロパティの使用を参照してください。

テキストの選択

Flex の編集可能なコントロールには、テキスト領域を選択し、選択内容を取得するためのプロパティとメソッドがあります。選択した内容は修正できます。詳細については、テキストの修正を参照してください。

選択範囲の作成

TextInput および TextArea コントロール(RichTextEditor コントロールの TextArea サブコントロールを含む)には、次に示すテキスト選択プロパティとメソッドがあります。

  • setSelection() メソッドは、テキストの範囲を選択します。選択範囲の開始文字のインデックスと最終文字の直後の位置のインデックスを指定します(インデックスは 0 から始まります)。
  • selectionBeginIndex および selectionEndIndex は、テキスト内での選択範囲の開始位置と、終了位置の直後の位置を設定または返します(位置は 0 から始まります)。

例えば、myTextArea TextArea コントロールの最初の 10 文字を選択する場合は、次のメソッドを使用します。

myTextArea.setSelection(0, 10);

選択内容の最後の文字を TextArea コントロールの 25 文字目に変更するには、次のステートメントを使用します。

myTextArea.endIndex=25;

RichTextEditor コントロールでテキストを選択するには、コントロールの TextArea サブコントロールを使用します。このサブコントロールには、textArea id を使用してアクセスします。例えば、myRTE RichTextEditor コントロールで最初の 10 文字を選択するには、次のコードを使用します。

myRTE.textArea.setSelection(0, 10);

選択内容の取得

テキストコントロールの選択内容を取得するには、選択したテキストが含まれる TextRange オブジェクトを取得します。取得した TextRange オブジェクトを使用して、選択されているテキストを修正できます。詳細については、テキストの修正を参照してください。選択内容の取得に使用する手法は、コントロールの種類によって異なります。

TextArea または TextInput コントロールの選択内容の取得

TextArea または TextInput コントロールで現在選択されているテキストが含まれる TextRange オブジェクトを取得するには、TextRange クラスコンストラクタを使用します。例えば、myTextArea コントロールの現在の選択内容を取得するには、次の行を使用します。

var mySelectedTextRange:TextRange = new TextRange(myTextArea, true);

2 番目の true パラメータは、選択済みのテキストが含まれる TextRange オブジェクトを返すようコンストラクタに指示します。

RichTextEditor コントロールの選択内容の取得

TextArea サブコントロール内の現在選択されているテキストが含まれる TextRange オブジェクトを取得するには、RichTextEditor の読み取り専用プロパティである selection を使用します。取得した TextRange オブジェクトを使用して、選択されているテキストを修正できます。詳細については、テキストの修正を参照してください。例えば、MyRTE RichTextEditor コントロールの現在の選択内容を取得するには、次の行を使用します。

public var mySelectedTextRange:TextRange = myRTE.selection;

テキストの修正

TextRange クラスを使用して、TextArea、TextInput または RichTextEditor コントロールのテキストを修正します。このクラスは、次のテキストの特性に影響します。

  • text または htmltext プロパティの内容
  • テキストカラー、装飾(下線)および整列
  • フォントファミリー、サイズ、スタイル(イタリック)および太さ(ボールド)
  • HTML <a> リンクの URL

TextRange オブジェクトの取得

TextRange オブジェクトを取得するには、次の手法を使用します。

  • 現在のテキスト選択範囲が含まれる TextRange オブジェクトを取得します。詳細については、選択内容の取得を参照してください。
  • 特定のテキスト範囲が含まれる TextRange オブジェクトを作成します。

特定のテキスト範囲が含まれる TextRange オブジェクトを作成するには、次のフォーマットで TextRange コンストラクタを使用します。

new TextRange(control, modifiesSelection, beginIndex, endIndex)

テキストが含まれるコントロールを指定します。また、TextRange オブジェクトが選択内容に相当しているかどうか(つまり、選択済みテキストを表現および修正するかどうか)を指定します。さらに、テキスト範囲内の最初の文字と最後の文字を表す 0 ベースのインデックスを指定します。原則として、選択範囲の設定には TextRange コンストラクタを使用しないでください。代わりに setSelection() メソッドを使用します。詳細については、選択範囲の作成を参照してください。このため、開始インデックスと終了インデックスを指定するときは、2 番目のパラメータを常に false に設定する必要があります。

例として、myTextArea という名前の TextArea コントロールの 5 番目から 25 番目までの文字を含む TextRange オブジェクトを取得するには、次のようにします。

var myTARange:TextRange = new TextRange(myTextArea, false, 4, 25);

テキストの変更

TextRange オブジェクトを取得した後は、そのプロパティを使用して範囲内のテキストを修正します。TextRange に対する変更は、テキストコントロールに表示されます。

テキストは、TextRange オブジェクト内で、HTML テキストまたはプレーンテキストとして取得および設定できます。最初にテキストを設定したときに、どのプロパティを使用したかは関係ありません。例えば、TextArea コントロールを作成して、その text プロパティを設定した場合、TextRange の htmlText プロパティを使用して、テキストを取得および変更することができます。次の例は、この使用法を示しており、TextRange クラスを使用してテキストの範囲にアクセスし、そのプロパティを変更する方法を示しています。また、String プロパティとメソッドを使用して、テキストインデックスを取得する方法も示しています。

<?xml version="1.0"?>
<!-- textcontrols/TextRangeExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="600"
     height="500">
  <mx:Script><![CDATA[
     import mx.controls.textClasses.TextRange

     public function alterText():void {
        // Create a TextRange object starting with "the" and ending at the 
        // first period. Replace it with new formatted HTML text.
        var tr1:TextRange = new TextRange(ta1, false, ta1.text.indexOf("the", 0), ta1.text.indexOf(".", 0));
        tr1.htmlText="<i>italic HTML text</i>"

        // Create a TextRange object with the remaining text.
        // Select the text and change its formatting.
        var tr2:TextRange = new TextRange(ta1, true, ta1.text.indexOf("It", 0), ta1.text.length-1);
        tr2.color=0xFF00FF;
        tr2.fontSize=18;
        tr2.fontStyle = "italic"; // any other value turns italic off
        tr2.fontWeight = "bold"; // any other value turns bold off
        ta1.setSelection(0, 0);
     }
  ]]></mx:Script>

  <mx:TextArea id="ta1" fontSize="12" fontWeight="bold" width="100%" height="100">
     <mx:text>
        This is a test of the emergency broadcast system. It is only a test.
     </mx:text>
  </mx:TextArea>
  <mx:Button label="Alter Text" click="alterText();"/>
</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

例:RichTextEditor コントロールでの選択済みテキストの変更

次の例では、ユーザーがテキストを選択したときに RichTextEditor コントロールの selectedText プロパティを使用して TextRange を取得し、TextRange プロパティを使用して選択テキストの特性を取得および変更する方法を示しています。この例を使用するには、マウスでテキストの範囲を選択します。マウスボタンを離すと、選択範囲が「This is replacement text.」というストリングに置き換えられ、そのフォントが赤紫色 20 ポイントの Courier に設定されます。また、テキスト領域に元のテキストと置換テキストが表示されます。

<?xml version="1.0"?>
<!-- textcontrols/TextRangeSelectedText.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="600" height="500">
  <mx:Script><![CDATA[
     import mx.controls.textClasses.TextRange;

     //The following text must be on a single line.
     [Bindable]
     public var htmlData:String="<textformat leading='2'><p align='center'><b><font size='20'>HTML Formatted Text</font></b></p></textformat><br><textformat leading='2'><p align='left'><font face='_sans' size='12' color='#000000'>This paragraph contains <b>bold</b>, <i>italic</i>, <u>underlined</u>, and <b><i><u>bold italic underlined </u></i></b>text. </font></p></textformat><br><p><u><font face='arial' size='14' color='#ff0000'>This a red underlined 14-point arial font with no alignment set.</font></u></p><p align='right'><font face='verdana' size='12' color='#006666'><b>This a teal bold 12-pt. Verdana font with alignment set to right.</b></font></p>";

     public function changeSelectionText():void {
        //Get a TextRange with the selected text and find its length.
        var sel:TextRange = rte1.selection;
        var selLength:int = sel.endIndex - sel.beginIndex;
        //Do the following only if the user made a selection.
        if (selLength) {
           //Display the selection size and font color, size, and family.
           t1.text="Number of characters selected: " + String(selLength);
           t1.text+="\n\nOriginal Font Family: " + sel.fontFamily;
           t1.text+="\nOriginal Font Size: " + sel.fontSize;
           t1.text+="\nOriginal Font Color: " + sel.color;
           //Change font color, size, and family and replace selected text.
           sel.text="This is replacement text. "
           sel.color="fuchsia";
           sel.fontSize=20;
           sel.fontFamily="courier"
           //Show the new font color, size, and family.
           t1.text+="\n\nNew text length: " + String(sel.endIndex - sel.beginIndex);
           t1.text+="\nNew Font Family: " + sel.fontFamily;
           t1.text+="\nNew Font Size: " + sel.fontSize;
           t1.text+="\nNew Font Color: " + sel.color;
        }
     }
  ]]></mx:Script>

  <!-- The text area. When you release the mouse after selecting text, 
     it calls the func1 function. -->
  <mx:RichTextEditor id="rte1" htmlText="{htmlData}" width="100%" height="100%" mouseUp="changeSelectionText()"/>
  <mx:TextArea editable="false" id="t1" fontSize="12" fontWeight="bold"     width="300" height="180"/>

</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

 

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート