Flex - RichTextEditor 控制元件

RichTextEditor 控制元件允許使用者輸入和格式化文字。使用者可以更改字體系列、顏色、大小和樣式，以及其他屬性，例如文字對齊、專案符號和 URL 連結。該控制元件包含一個面板控制元件，其中有兩個控制元件

一個文字區域控制元件，使用者可以在其中輸入文字。
一個包含格式控制元件的容器，允許使用者指定文字特徵。格式控制元件會影響正在鍵入的文字或選定的文字。

類宣告

以下是 mx.controls.RichTextEditor 類的宣告：

public class RichTextEditor  
   extends Panel

公共屬性

序號	屬性和描述
1	alignToolTip : String = "對齊" 當用戶將滑鼠懸停在文字對齊按鈕上時出現的工具提示。
2	boldToolTip : String = "粗體" 當用戶將滑鼠懸停在文字粗體按鈕上時出現的工具提示。
3	bulletToolTip : String = "專案符號" 當用戶將滑鼠懸停在專案符號列表按鈕上時出現的工具提示。
4	colorPickerToolTip : String = "顏色" 當用戶將滑鼠懸停在 ColorPicker 控制元件上時出現的工具提示。
5	defaultLinkProtocol : String 在連結文字開頭使用的預設協議字串。
6	fontFamilyToolTip : String = "字體系列" 當用戶將滑鼠懸停在字型下拉列表上時出現的工具提示。
7	fontSizeToolTip : String = "字型大小" 當用戶將滑鼠懸停在字型大小下拉列表上時出現的工具提示。
8	htmlText : String 包含 HTML 標記的文字，顯示在 RichTextEditor 控制元件的 TextArea 子控制元件中。
9	italicToolTip : String = "斜體" 當用戶將滑鼠懸停在文字斜體按鈕上時出現的工具提示。
10	linkToolTip : String = "連結" 當用戶將滑鼠懸停在連結文字輸入欄位上時出現的工具提示。
11	selection : mx.controls.textClasses:TextRange [只讀] 一個 TextRange 物件，包含 TextArea 子控制元件中選定的文字。
12	showControlBar : Boolean 指定是否顯示包含文字格式控制元件的控制欄。
13	showToolTips : Boolean 指定是否為文字格式控制元件顯示工具提示。
14	text : String 不帶標記的純文字，顯示在 RichTextEditor 控制元件的 TextArea 子控制元件中。
15	underlineToolTip : String = "下劃線" 當用戶將滑鼠懸停在文字下劃線按鈕上時出現的工具提示。

公共方法

序號	方法和描述
1	RichTextEditor() 建構函式。

事件

序號	事件和描述
1	change 當用戶更改 TextArea 控制元件中文字的內容或格式時排程。

繼承的方法

此類繼承自以下類：

mx.containers.Panel
mx.core.Container
mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
Object

Flex RichTextEditor 控制元件示例

讓我們按照以下步驟檢查在 Flex 應用程式中使用 RichTextEditor 控制元件，方法是建立一個測試應用程式：

步驟	描述
1	在包 com.tutorialspoint.client 下建立一個名為 HelloWorld 的專案，如Flex - 建立應用程式章節中所述。
2	修改 HelloWorld.mxml，如下所述。保持其他檔案不變。
3	編譯並執行應用程式，以確保業務邏輯按要求工作。

以下是修改後的 mxml 檔案 src/com.tutorialspoint/HelloWorld.mxml 的內容。

<?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 = "100%" height = "100%" minWidth = "500" minHeight = "500">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />	
   <fx:Script>
      <![CDATA[
         private var richTextString:String = "You can enter text into the"
            +" <b>RichTextEditor control</b>.Click <b>"
            +"<font color = '#BB50AA'>buttons</font></b> to display"
            +" entered text as <i>plain text</i>, "
            +"or as <i>HTML-formatted</i> text.";			
      ]]>
   </fx:Script>  
   
   <s:BorderContainer width = "630" height = "480" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Complex Controls Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
         
         <s:Panel id = "richTextEditorPanel" title = "Using RichTextEditor"
            width = "500" height = "300">
            <s:layout>
               <s:VerticalLayout  gap = "10" verticalAlign = "middle"
                  horizontalAlign = "center" />	
            </s:layout>
            
            <mx:RichTextEditor id = "richTextEditor" title = "RichTextEditor" 
               width = "90%" height = "150"
               borderAlpha = "0.15" 
               creationComplete = "richTextEditor.htmlText = richTextString;" />
            <s:TextArea id = "richText" width = "90%" height = "50" />
            
            <s:HGroup>
               <s:Button label = "Show Plain Text" 
                  click = "richText.text = richTextEditor.text;" />
               <s:Button label = "Show HTML Markup" 
                  click = "richText.text = richTextEditor.htmlText;" />
            </s:HGroup>
         </s:Panel>
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

完成所有更改後，讓我們像在Flex - 建立應用程式章節中一樣，在正常模式下編譯並執行應用程式。如果應用程式一切正常，它將產生以下結果：[ 線上試用 ]

flex_complex_controls.htm

列印頁面