Flex - Controle RichTextEditor

O controle RichTextEditor fornece ao usuário a opção de inserir e formatar texto. O usuário pode alterar a família, cor, tamanho e estilo da fonte e outras propriedades, como alinhamento de texto, marcadores e links de URL. O controle consiste em um painel de controle com dois controles

Um controle de área de texto onde os usuários podem inserir texto.
Um Container com controles de formato que permitem ao usuário especificar as características do texto. Os controles de formato afetam o texto digitado ou o texto selecionado.

Declaração de Classe

A seguir está a declaração para mx.controls.RichTextEditor classe -

public class RichTextEditor  
   extends Panel

Propriedades Públicas

Sr. Não	Descrição da Propriedade
1	alignToolTip : String = "Align" A dica de ferramenta que aparece quando o usuário passa o mouse sobre os botões de alinhamento de texto.
2	boldToolTip : String = "Bold" A dica de ferramenta que aparece quando o usuário passa o mouse sobre o botão de texto em negrito.
3	bulletToolTip : String = "Bullet" A dica de ferramenta que aparece quando o usuário passa o mouse sobre o botão de lista com marcadores.
4	colorPickerToolTip : String = "Color" A dica de ferramenta que aparece quando o usuário passa o mouse sobre o controle ColorPicker.
5	defaultLinkProtocol : String A string de protocolo padrão a ser usada no início do texto do link.
6	fontFamilyToolTip : String = "Font Family" A dica de ferramenta que aparece quando o usuário passa o mouse sobre a lista suspensa de fontes.
7	fontSizeToolTip : String = "Font Size" A dica de ferramenta que aparece quando o usuário passa o mouse sobre a lista suspensa de tamanho de fonte.
8	htmlText : String Texto que contém a marcação HTML que é exibida no subcontrole TextArea do controle RichTextEditor.
9	italicToolTip : String = "Italic" A dica de ferramenta que aparece quando o usuário passa o mouse sobre o botão de texto em itálico.
10	linkToolTip : String = "Link" A dica de ferramenta que aparece quando o usuário passa o mouse sobre o campo de entrada de texto do link.
11	selection : mx.controls.textClasses:TextRange [somente leitura] Um objeto TextRange contendo o texto selecionado no subcontrole TextArea.
12	showControlBar : Boolean Especifica se deve ser exibida a barra de controle que contém os controles de formatação de texto.
13	showToolTips : Boolean Especifica se deve exibir dicas de ferramentas para os controles de formatação de texto.
14	text : String Texto simples sem marcação que é exibido no subcontrole TextArea do controle RichTextEditor.
15	underlineToolTip : String = "Underline" A dica de ferramenta que aparece quando o usuário passa o mouse sobre o botão de sublinhado de texto.

Métodos Públicos

Sr. Não	Método e Descrição
1	RichTextEditor() Construtor.

Eventos

Sr. Não	Descrição do Evento
1	change Enviado quando o usuário altera o conteúdo ou o formato do texto no controle TextArea.

Métodos herdados

Esta classe herda métodos das seguintes 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

Exemplo de controle Flex RichTextEditor

Vamos seguir as etapas a seguir para verificar o uso do controle RichTextEditor em um aplicativo Flex criando um aplicativo de teste -

Degrau	Descrição
1	Crie um projeto com um nome HelloWorld em um pacote com.tutorialspoint.client conforme explicado no capítulo Flex - Criar aplicativo .
2	Modifique HelloWorld.mxml conforme explicado abaixo. Mantenha o resto dos arquivos inalterados.
3	Compile e execute o aplicativo para ter certeza de que a lógica de negócios está funcionando de acordo com os requisitos.

A seguir está o conteúdo do arquivo 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>

Quando estiver pronto com todas as alterações feitas, vamos compilar e executar o aplicativo no modo normal como fizemos no capítulo Flex - Criar aplicativo . Se tudo estiver bem com sua aplicação, ele produzirá o seguinte resultado: [ ]

↰ Previous page