RichTextEditor コントロールを使用すると、ユーザーがテキストを入力、編集、およびフォーマットできます。ユーザーは、RichTextEditor コントロールの下部に表示されるサブコントロールを使用して、テキストフォーマットや URL リンクを適用します。

詳細については、『Adobe Flex リファレンスガイド』を参照してください。

RichTextEditor コントロールについて

RichTextEditor コントロールは、Panel コントロールと次の 2 つの直系の子で構成されています。

• TextArea コントロール。ユーザーはここにテキストを入力できます。
• フォーマットコントロールを持つ ToolBar コンテナ。このフォーマットコントロールを使用して、ユーザーはテキストの特性を指定します。ユーザーは、ToolBar サブコントロールを使用して、次のテキスト特性を適用することができます。
  • フォントファミリー
  • フォントサイズ
    注意: RichTextEditor コントロールを使用する場合は、フォントサイズの実際のピクセル値を指定します。このサイズは、HTML <font> タグの size 属性を使用して HTML で指定される相対フォントサイズではありません。

  • ボールド、イタリック、下線のフォントスタイルの組み合わせ
  • テキストカラー
  • テキストの整列：左揃え、中央揃え、右揃え、均等割り付け
  • 黒丸
  • URL リンク

次の図は、フォーマットされたテキストを持つ RichTextEditor コントロールを示しています。

この例のソースについては、RichTextEditor コントロールの作成を参照してください。

RichTextEditor は、次に示すとおりインタラクティブに使用します。

• 入力するテキストは、コントロール設定で指定されたとおりにフォーマットされます。
• 既存のテキストに新規のフォーマットを適用するには、テキストを選択し、必要なフォーマットをコントロールに設定します。
• リンクを作成するには、テキストの範囲を選択し、右側のテキストボックスにリンクターゲットを入力してから Enter キーを押します。URL のみを指定することもできます。リンクは、_blank ターゲットでいつでも開くことができます。また、リンクを作成することにより、リンクテキストの外見が変わることはありません。任意のカラーや下線を、個別に適用する必要があります。
• 通常のキーボードコマンドを使用して、Flash HTML テキストフィールド内とテキストフィールド間で、リッチテキストの切り取り、コピーおよびペーストを行うことができます。このテキストフィールドには、RichTextEditor コントロールの TextArea サブコントロールも含まれます。また、TextArea と任意のテキストアプリケーションの間で、プレーンテキストのコピーおよびペーストを行うこともできます。このテキストアプリケーションには、ブラウザやテキストエディタなどが含まれます。

RichTextEditor コントロールの作成

RichTextEditor コントロールは、次の例に示すように、<mx:RichTextEditor> タグを使用して MXML 内で定義します。MXML の他の場所（他のタグまたは ActionScript ブロック）のコントロールを参照する場合は、id 値を指定します。

<?xml version="1.0"?>
<!-- textcontrols/RichTextEditorControl.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:RichTextEditor id="myRTE" text="Congratulations, winner!" />
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

フォーマットされていないテキストストリングを指定する場合は text プロパティを使用し、HTML 形式のストリングを指定する場合は htmlText プロパティを使用します。これらのプロパティの使用の詳細については、text プロパティの使用およびhtmlText プロパティの使用を参照してください。コントロール内でのテキストの選択、置換、フォーマットの詳細については、テキストの選択と修正を参照してください。

次の例では、RichTextEditor コントロールについての図を作成するためのコードを示しています。

<?xml version="1.0"?>
<!-- textcontrols/RichTextEditorControlWithFormattedText.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="700"
height="400">
  <!-- The HTML text string used to populate the RichTextEditor control's
     TextArea subcontrol. The text is on a single line. -->
  <mx:Script><![CDATA[
     [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><br><li>This is bulleted text.</li><li><font face='arial' size='12' color='#0000ff'><u> <a href='http://www.adobe.com'>This is a bulleted link with underline and blue color set.</a></u></font></li>";
  ]]></mx:Script>

  <!-- The RichTextEditor control. To reference a subcontrol prefix its ID with the RichTextEditor control ID. -->
  <mx:RichTextEditor id="rte1" 
     backgroundColor="#ccffcc" 
     width="605"
     headerColors="[#88bb88, #bbeebb]" 
     footerColors="[#bbeebb, #88bb88]" 
     title="Rich Text Editor" 
     htmlText="{htmlData}" 
     initialize="rte1.textArea.setStyle('backgroundColor', '0xeeffee')"
  />
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

RichTextEditor コントロールのサイズ設定

このコントロールは、TextArea コントロールのテキストのサイズに応じてサイズ変更されることはありません。テキストが表示可能なスペースを超えた場合、デフォルトでは、TextArea コントロールによりスクロールバーが追加されます。height または width プロパティのいずれか（両方ではない）の値を指定すると、コントロールでは、設定していないプロパティに対してデフォルト値が使用されます。

RichTextEditor コントロールの幅が 605 ピクセル未満になるように width の値を設定すると、サブコントロールが複数行になります。

RichTextEditor サブコントロールのプログラミング

RichTextEditor サブコントロール（TextArea、ColorPicker、テキストフォーマットを制御する ComboBox や Button など）の設定はすべて、アプリケーションから制御できます。RichTextEditor サブコントロールを参照するには、要求するコントロール ID の前に RichTextEditor コントロールの ID を追加します。例えば、ID が rte1 である RichTextEditor コントロール内の ColorPicker コントロールを参照するには、rte1.colorPicker を使用します。

RichTextEditor コントロールに直接適用する継承可能なスタイルは、基になる Panel コントロールとそのサブコントロールに影響します。RichTextEditor コントロールに直接適用するプロパティは、基になる Panel コントロールのみに影響します。

詳細については、『Adobe Flex リファレンスガイド』の RichTextEditor を参照してください。

RichTextEditor サブコントロールのプロパティとスタイルの設定

次に示す簡単な例は、RichTextEditor コントロールおよびそのサブコントロールのプロパティとスタイルを設定および変更する方法を示しています。この例では、RichTextEditor コントロールが Panel クラスから継承したスタイルを使用して、Panel コントロールのヘッダと ToolBar コンテナのカラーを設定します。また、RichTextEditor コントロールの creationComplete イベントメンバー内の TextArea コントロールの背景色を設定します。ユーザーがボタンをクリックすると、このクリックのイベントリスナーにより、TextArea コントロールの背景色と ColorPicker コントロールの選択済みカラーが変更されます。

<?xml version="1.0"?>
<!-- textcontrols/RTESubcontrol.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
     height="420">
  <!-- The RichTextEditor control. To set the a subcontrol's style or property, fully qualify the control ID. The footerColors style sets the ControlBar colors. -->
  <mx:RichTextEditor id="rte1" 
     backgroundColor="#ccffcc" 
     headerColors="[#88bb88, #bbeebb]" 
     footerColors="[#bbeebb, #88bb88]" 
     title="Rich Text Editor" 
     creationComplete="rte1.textArea.setStyle('backgroundColor','0xeeffee')" 
     text="Simple sample text"
  />

  <!-- Button to set a white TextArea background. -->
  <mx:Button 
     label="Change appearance" 
     click="rte1.textArea.setStyle('backgroundColor', '0xffffff');rte1.colorPicker.selectedIndex=27;"
  />

  <!-- Button to reset the display to its original appearance. --> 
  <mx:Button 
     label="Reset Appearance" 
     click="rte1.textArea.setStyle('backgroundColor', '0xeeffee');rte1.colorPicker.selectedIndex=0;"
  />
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

RichTextEditor サブコントロールの削除と追加

整列ボタンのような標準的な RichTextEditor サブコントロールは、いずれも削除できます。また、検索および置換のダイアログボックスをポップアップ表示させるボタンのような、独自のサブコントロールを追加することもできます。

既存のサブコントロールの削除

1. エディタのツールバーコンテナサブコントロールの removeChildAt メソッドを呼び出す関数を作成して、削除するコントロールを指定します。
2. RichTextEditor コントロールの initialize イベントリスナー内で、このメソッドを呼び出します。

次の例では、RichTextEditor コントロールから整列ボタンを削除し、2 番目の RichTextEditor コントロールのデフォルトの外観を表示します。

<?xml version="1.0"?>
<!-- textcontrols/RTERemoveAlignButtons.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     public function removeAlignButtons():void {
        rt1.toolbar.removeChild(rt1.alignButtons);
     }
  ]]></mx:Script>
  
  <mx:RichTextEditor id="rt1" title="RichTextEditor With No Align Buttons" creationComplete="removeAlignButtons()"/>

  <mx:RichTextEditor id="rt2" title="Default RichTextEditor"/>

</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

新しいサブコントロールの追加

1. サブコントロールを定義する ActionScript 関数を作成します。また、コントロールの関数をサポートするために必要なメソッドも作成します。
2. 次のタグに示すように、RichTextEditor コントロールの initialize イベントリスナー内でこのメソッドを呼び出します。

   <mx:RichTextEditor id="rt" initialize="addMyControl()"
   
   

次の例では、RichTextEditor コントロールに検索および置換のダイアログボックスを追加します。これはアプリケーションと、検索および置換のダイアログを定義する（さらにテキスト上で検索および置換の操作も実行する）カスタムの TitleWindow コントロールという、2 つのファイルで構成されます。アプリケーションには、次のような TitleWindow をポップアップ表示させるボタンを追加する関数が含まれています。

<?xml version="1.0"?>
<!-- textcontrols/CustomRTE.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
     width="600" height="100%">
  <mx:Script>
     <![CDATA[
        import mx.controls.*;
        import mx.containers.*;
        import flash.events.*;
        import mx.managers.PopUpManager;
        import mx.core.IFlexDisplayObject;

        // The variable for the pop-up dialog box.
        public var w:IFlexDisplayObject;

        // Add the Find/Replace button to the Rich Text Editor control's
        // tool bar container.
        public function addFindReplaceButton():void {
           var but:Button = new Button();
           but.label = "Find/Replace";
           but.addEventListener("click",findReplaceDialog);
           rt.toolbar.addChild(but);
        }

        // The event listener for the Find/Replace button's click event
        // creates a pop-up with a MyTitleWindow custom control.
        public function findReplaceDialog(event:Event):void {
           var w:MyTitleWindow = MyTitleWindow(PopUpManager.createPopUp
            (this, MyTitleWindow, true));
           w.height=200;
           w.width=340;
           // Pass the a reference to the textArea subcontrol
           // so that the custom control can replace the text.
           w.RTETextArea = rt.textArea;
           PopUpManager.centerPopUp(w);
        }
     ]]>
  </mx:Script>

<mx:RichTextEditor id="rt" width="95%" title="RichTextEditor"
     text="This is a short text."
     initialize="addFindReplaceButton()"/>

</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

次の MyTitleWindow.mxml ファイルは、検索および置換のインターフェイスとロジックを含むカスタムの myTitleWindow コントロールを定義します。

<?xml version="1.0"?>
<!-- A TitleWindow that displays the X close button. Clicking the close button only generates a CloseEvent event, so it must handle the event to close the control. -->
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" title="Find/Replace" showCloseButton="true" close="closeDialog();">
    <mx:Script>
        <![CDATA[
            import mx.controls.TextArea;
            import mx.managers.PopUpManager;

            // Reference to the RichTextArea textArea subcontrol.
            // It is set by the application findReplaceDialog method
            // and used in the replaceAndClose method, below.
            public var RTETextArea:TextArea;

            // The event handler for the Replace button's click event.
            // Replace the text in the RichTextEditor TextArea and
            // close the dialog box.
            public function replaceAndClose():void{
                RTETextArea.text = RTETextArea.text.replace(ti1.text, ti2.text);
                PopUpManager.removePopUp(this);
            }

            // The event handler for the TitleWindow close button.
            public function closeDialog():void {
                PopUpManager.removePopUp(this);
            }

        ]]>
    </mx:Script>

    <!-- The TitleWindow subcontrols: the find and replace inputs, 
        their labels, and a button to initiate the operation. -->
    <mx:Label text="Find what:"/>
    <mx:TextInput id="ti1"/>
    <mx:Label text="Replace with:"/>
    <mx:TextInput id="ti2"/>
    <mx:Button label="Replace" click="replaceAndClose();"/>
        
</mx:TitleWindow>