Flex 2 開発ガイド > Flex アプリケーションのユーザーインターフェイスの作成 > テキストコントロールの使用 > RichTextEditor コントロール

RichTextEditor コントロール

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

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

サブトピック

RichTextEditor コントロールについて

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

• TextArea コントロール。ユーザーはその中にテキストを入力できます。
• フォーマットコントロールを持つ ToolBar コンテナ。このフォーマットコントロールを使用して、ユーザーはテキストの特性を指定します。ユーザーは、ToolBar サブコントロールを使用して、次のテキスト特性を適用することができます。
• フォントファミリー
• フォントサイズ
• ボールド、イタリック、下線のフォントスタイルの組み合わせ
• テキストカラー
• テキストの整列 : 左揃え、中央揃え、右揃え、均等割り付け
• 黒丸
• 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>

フォーマットされていないテキストストリングを指定する場合は 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>

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

RichTextEditor コントロールには、次のデフォルトのサイズ変更プロパティがあります。

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

設定した width 値により、幅が 605 ピクセル未満になる場合、RichTextEditor コントロールでは、サブコントロールが連続してスタックされます。

Flex 2.01