Flex - Control RichTextEditor

El control RichTextEditor proporciona al usuario la opción de ingresar y formatear texto. El usuario puede cambiar la familia de fuentes, el color, el tamaño y el estilo, y otras propiedades como la alineación del texto, las viñetas y los enlaces URL. El control consta de un panel de control con dos controles

Un control de área de texto donde los usuarios pueden ingresar texto.
Un contenedor con controles de formato que permiten al usuario especificar las características del texto. Los controles de formato afectan el texto que se escribe o el texto seleccionado.

Declaración de clase

A continuación se muestra la declaración de mx.controls.RichTextEditor clase -

public class RichTextEditor  
   extends Panel

Propiedades publicas

No Señor	Descripción de propiedad
1	alignToolTip : String = "Align" La información sobre herramientas que aparece cuando el usuario se desplaza sobre los botones de alineación del texto.
2	boldToolTip : String = "Bold" La información sobre herramientas que aparece cuando el usuario se desplaza sobre el botón de texto en negrita.
3	bulletToolTip : String = "Bullet" La información sobre herramientas que aparece cuando el usuario se desplaza sobre el botón de lista con viñetas.
4	colorPickerToolTip : String = "Color" La información sobre herramientas que aparece cuando el usuario pasa el mouse sobre el control ColorPicker.
5	defaultLinkProtocol : String La cadena de protocolo predeterminada que se utilizará al comienzo del texto del enlace.
6	fontFamilyToolTip : String = "Font Family" La información sobre herramientas que aparece cuando el usuario se desplaza sobre la lista desplegable de fuentes.
7	fontSizeToolTip : String = "Font Size" La información sobre herramientas que aparece cuando el usuario se desplaza sobre la lista desplegable de tamaño de fuente.
8	htmlText : String Texto que contiene marcado HTML que se muestra en el subcontrol TextArea del control RichTextEditor.
9	italicToolTip : String = "Italic" La información sobre herramientas que aparece cuando el usuario coloca el cursor sobre el botón de texto en cursiva.
10	linkToolTip : String = "Link" La información sobre herramientas que aparece cuando el usuario se desplaza sobre el campo de entrada de texto del vínculo.
11	selection : mx.controls.textClasses:TextRange [solo lectura] Un objeto TextRange que contiene el texto seleccionado en el subcontrol TextArea.
12	showControlBar : Boolean Especifica si se muestra la barra de control que contiene los controles de formato de texto.
13	showToolTips : Boolean Especifica si mostrar información sobre herramientas para los controles de formato de texto.
14	text : String Texto sin formato sin marcado que se muestra en el subcontrol TextArea del control RichTextEditor.
15	underlineToolTip : String = "Underline" La información sobre herramientas que aparece cuando el usuario se desplaza sobre el botón de subrayado de texto.

Métodos públicos

No Señor	Método y descripción
1	RichTextEditor() Constructor.

Eventos

No Señor	Descripción del evento
1	change Se distribuye cuando el usuario cambia el contenido o el formato del texto en el control TextArea.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

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

Ejemplo de control Flex RichTextEditor

Sigamos los siguientes pasos para verificar el uso del control RichTextEditor en una aplicación Flex creando una aplicación de prueba:

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación .
2	Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos.

A continuación se muestra el contenido del archivo mxml modificado 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>

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ Pruébelo en línea ]

↰ Previous page