Flex - Controllo RichTextEditor

Il controllo RichTextEditor fornisce all'utente l'opzione per immettere e formattare il testo. L'utente può modificare la famiglia di caratteri, il colore, la dimensione e lo stile e altre proprietà come l'allineamento del testo, i punti elenco e i collegamenti URL. Il controllo è costituito da un pannello di controllo con due controlli

Un controllo Area di testo in cui gli utenti possono immettere testo.
Un contenitore con controlli di formato che consentono a un utente di specificare le caratteristiche del testo. I controlli del formato influiscono sul testo digitato o sul testo selezionato.

Dichiarazione di classe

Di seguito è riportata la dichiarazione per mx.controls.RichTextEditor classe -

public class RichTextEditor  
   extends Panel

Proprietà pubbliche

Suor n	Proprietà e descrizione
1	alignToolTip : String = "Align" La descrizione comando che appare quando l'utente passa con il mouse sui pulsanti di allineamento del testo.
2	boldToolTip : String = "Bold" La descrizione comando che appare quando l'utente passa con il mouse sul pulsante di testo in grassetto.
3	bulletToolTip : String = "Bullet" La descrizione comando che appare quando l'utente passa con il mouse sul pulsante dell'elenco puntato.
4	colorPickerToolTip : String = "Color" Descrizione comando che appare quando l'utente passa il mouse sul controllo ColorPicker.
5	defaultLinkProtocol : String La stringa di protocollo predefinita da utilizzare all'inizio del testo del collegamento.
6	fontFamilyToolTip : String = "Font Family" La descrizione comando che appare quando l'utente passa con il mouse sull'elenco a discesa dei caratteri.
7	fontSizeToolTip : String = "Font Size" La descrizione comando che appare quando l'utente passa con il mouse sull'elenco a discesa delle dimensioni del carattere.
8	htmlText : String Testo contenente markup HTML che viene visualizzato nel sottocontrollo TextArea del controllo RichTextEditor.
9	italicToolTip : String = "Italic" La descrizione comando che appare quando l'utente passa il mouse sul pulsante di testo in corsivo.
10	linkToolTip : String = "Link" La descrizione comando che appare quando l'utente passa con il mouse sul campo di immissione del testo del collegamento.
11	selection : mx.controls.textClasses:TextRange [sola lettura] Un oggetto TextRange contenente il testo selezionato nel sottocontrollo TextArea.
12	showControlBar : Boolean Specifica se visualizzare la barra di controllo che contiene i controlli di formattazione del testo.
13	showToolTips : Boolean Specifica se visualizzare i suggerimenti per i controlli di formattazione del testo.
14	text : String Testo normale senza markup visualizzato nel sottocontrollo TextArea del controllo RichTextEditor.
15	underlineToolTip : String = "Underline" La descrizione comando che appare quando l'utente passa con il mouse sul pulsante di sottolineatura del testo.

Metodi pubblici

Suor n	Metodo e descrizione
1	RichTextEditor() Costruttore.

Eventi

Suor n	Descrizione dell'evento
1	change Inviato quando l'utente modifica il contenuto o il formato del testo nel controllo TextArea.

Metodi ereditati

Questa classe eredita i metodi dalle seguenti classi:

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

Esempio di controllo Flex RichTextEditor

Seguiamo i seguenti passaggi per verificare l'utilizzo del controllo RichTextEditor in un'applicazione Flex creando un'applicazione di test:

Passo	Descrizione
1	Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint.client come spiegato nel capitolo Flex - Crea applicazione .
2	Modifica HelloWorld.mxml come spiegato di seguito. Mantieni il resto dei file invariato.
3	Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti.

Di seguito è riportato il contenuto del file mxml modificato 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 volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità normale come abbiamo fatto nel capitolo Flex - Crea applicazione . Se tutto va bene con la tua applicazione, produrrà il seguente risultato: [ Provalo online ]

↰ Previous page