Flex - RichTextEditor Control

Advertisements


Introduction

The RichTextEditor control provide user option to enter and format text. User can change font family, color, size, and style, and other properties such as text alignment, bullets and URL links. The control consists of a Panel control with two controls

  • A Text Area control where users can enter text.

  • A Container with format controls that let a user specify the text characteristics. The format controls affect text being typed or selected text.

Class declaration

Following is the declaration for mx.controls.RichTextEditor class:

public class RichTextEditor  
   extends Panel

Public properties

S.N.Property & Description
1alignToolTip : String = "Align"
The ToolTip that appears when the user hovers over the text alignment buttons.
2boldToolTip : String = "Bold"
The ToolTip that appears when the user hovers over the text bold button.
3bulletToolTip : String = "Bullet"
The ToolTip that appears when the user hovers over the bulleted list button.
4colorPickerToolTip : String = "Color"
The ToolTip that appears when the user hovers over the ColorPicker control.
5defaultLinkProtocol : String
The default protocol string to use at the start of link text.
6fontFamilyToolTip : String = "Font Family"
The ToolTip that appears when the user hovers over the font drop-down list.
7fontSizeToolTip : String = "Font Size"
The ToolTip that appears when the user hovers over the font size drop-down list.
8htmlText : String
Text containing HTML markup that displays in the RichTextEditor control's TextArea subcontrol.
9italicToolTip : String = "Italic"
The ToolTip that appears when the user hovers over the text italic button.
10linkToolTip : String = "Link"
The ToolTip that appears when the user hovers over the link text input field.
11selection : mx.controls.textClasses:TextRange
[read-only] A TextRange object containing the selected text in the TextArea subcontrol.
12showControlBar : Boolean
Specifies whether to display the control bar that contains the text formatting controls.
13showToolTips : Boolean
Specifies whether to display tooltips for the text formatting controls.
14text : String
Plain text without markup that displays in the RichTextEditor control's TextArea subcontrol.
15underlineToolTip : String = "Underline"
The ToolTip that appears when the user hovers over the text underline button.

Public methods

S.N.Method & Description
1RichTextEditor()
Constructor.

Events

S.N.Event & Description
1change
Dispatched when the user changes the contents or format of the text in the TextArea control.

Methods inherited

This class inherits methods from the following classes:

  • 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 Control Example

Let us follow the following steps to check usage of RichTextEditor control in a Flex application by creating a test application:

StepDescription
1Create a project with a name HelloWorld under a package com.tutorialspoint.client as explained in the Flex - Create Application chapter.
2Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged.
3Compile and run the application to make sure business logic is working as per the requirements.

Following is the content of the modified mxml file 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>

Once you are ready with all the changes done, let us compile and run the application in normal mode as we did in Flex - Create Application chapter. If everything is fine with your application, this will produce following result: [ Try it online ]

Flex RichTextEditor Control

Advertisements
Advertisements