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 ]