Flex - Contrôle RichTextEditor

Le contrôle RichTextEditor fournit une option utilisateur pour entrer et mettre en forme du texte. L'utilisateur peut modifier la famille de polices, la couleur, la taille et le style, ainsi que d'autres propriétés telles que l'alignement du texte, les puces et les liens URL. Le contrôle se compose d'un contrôle Panel avec deux contrôles

Un contrôle Zone de texte où les utilisateurs peuvent saisir du texte.
Un conteneur avec des contrôles de format qui permettent à un utilisateur de spécifier les caractéristiques du texte. Les contrôles de format affectent le texte tapé ou le texte sélectionné.

Déclaration de classe

Voici la déclaration pour mx.controls.RichTextEditor classe -

public class RichTextEditor  
   extends Panel

Propriétés publiques

Sr.Non	Propriété et description
1	alignToolTip : String = "Align" Info-bulle qui s'affiche lorsque l'utilisateur survole les boutons d'alignement du texte.
2	boldToolTip : String = "Bold" Info-bulle qui apparaît lorsque l'utilisateur survole le bouton en gras.
3	bulletToolTip : String = "Bullet" Info-bulle qui apparaît lorsque l'utilisateur survole le bouton de la liste à puces.
4	colorPickerToolTip : String = "Color" Info-bulle qui s'affiche lorsque l'utilisateur survole le contrôle ColorPicker.
5	defaultLinkProtocol : String Chaîne de protocole par défaut à utiliser au début du texte du lien.
6	fontFamilyToolTip : String = "Font Family" L'info-bulle qui apparaît lorsque l'utilisateur survole la liste déroulante des polices.
sept	fontSizeToolTip : String = "Font Size" L'info-bulle qui apparaît lorsque l'utilisateur survole la liste déroulante des tailles de police.
8	htmlText : String Texte contenant le balisage HTML qui s'affiche dans le sous-contrôle TextArea du contrôle RichTextEditor.
9	italicToolTip : String = "Italic" Info-bulle qui s'affiche lorsque l'utilisateur survole le bouton de texte en italique.
dix	linkToolTip : String = "Link" Info-bulle qui s'affiche lorsque l'utilisateur survole le champ de saisie de texte du lien.
11	selection : mx.controls.textClasses:TextRange [lecture seule] Objet TextRange contenant le texte sélectionné dans le sous-contrôle TextArea.
12	showControlBar : Boolean Spécifie s'il faut afficher la barre de contrôle contenant les contrôles de mise en forme du texte.
13	showToolTips : Boolean Spécifie s'il faut afficher des info-bulles pour les contrôles de mise en forme du texte.
14	text : String Texte brut sans balisage qui s'affiche dans le sous-contrôle TextArea du contrôle RichTextEditor.
15	underlineToolTip : String = "Underline" Info-bulle qui apparaît lorsque l'utilisateur survole le bouton de soulignement du texte.

Méthodes publiques

Sr.Non	Méthode et description
1	RichTextEditor() Constructeur.

Événements

Sr.Non	Description de l'évenement
1	change Distribué lorsque l'utilisateur modifie le contenu ou le format du texte dans le contrôle TextArea.

Méthodes héritées

Cette classe hérite des méthodes des classes suivantes -

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

Exemple de contrôle Flex RichTextEditor

Suivons les étapes suivantes pour vérifier l'utilisation du contrôle RichTextEditor dans une application Flex en créant une application de test -

Étape	La description
1	Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2	Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3	Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Voici le contenu du fichier mxml modifié 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>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, elle produira le résultat suivant: [ Essayez-le en ligne ]

↰ Previous page