Adobe Flex Tutorial - Adobe Flex Tutorial

30mar/096

Composant Flex – Afficher/masquer les barres d'outils d'un RichTextEditor avec RichTextEditorRemoveSubcontrols

Le framework Flex contient un composant appelé RichTextEditor (RTE) permettant d'entrer du texte et de le formatter en HTML. Par exemple, l'utilisateur peut sélectionner une partie de son texte et le mettre en gras ou modifier sa taille facilement. Voici à quoi ce composant ressemble:

Vous le voyez, tout est là pour formatter du texte, le passage en gras/italique/souligné, la police, la taille, la couleur du texte ... Mais admettons que vous ne vouliez qu'une partie de ces options, par exemple, seulement la taille et la couleur mais pas les autres. Le composant RichTextEditor a une propriété showControlBar permettant d'afficher ou non l'ensemble de ces ControlBar, mais pas individuellement.

Dans le même temps, le composant mx:RichTextEditor permet aussi d'accéder aux composants qui font partie des ces barres d'outils de manière individuelle. Par exemple, pour cacher le bouton Bold (Gras) peut être rendu invisible en faisant:

myRTE.boldButton.visible = false;

Pas très pratique, surtout si vous voulez utiliser ce composant à plusieurs endroits. Heureusement, bridel.org a crée un petit composant baptisé RichTextEditorRemoveSubcontrols (un peu long je trouve mais vous pouvez toujours le renommer ) permettant de fixer ces propriétés directement avec des propriétés. Ces propriétés peuvent bien sûr être fixées en MXML comme ceci:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
	<local:RichTextEditorRemoveSubcontrols id="myRTE"
		showColorPicker="false"
		showFont="true"
		showFontSize="true"
		showAlignButtons="false"
		showLinkTextInput="false"
		showBoldItalicUnderline="true"
		showBulletButton="false"
	/>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application

This movie requires Flash Player 11

Voir le site de l'auteur

Remplis sous: Composant Flex, Exemple, MXML, RichTextEditor, TextArea || Taggé comme: ControlBar, RTE, subControls Laisser un commentaire

Articles similaires

Commentaires (6) Trackbacks (0) (Souscrire aux commentaires de cet article)

gg
21 juin 2009

Bonjour,

Est-il possible de définir le couleur de fond de mon texte?
capoeiradance
20 avril 2010

Bonjour,

Est-il possible d'insérer une image dans le RichTexteditor?

Merci d'avance
fnicollet
20 avril 2010

Salut,
de base, ce n'est pas possible mais je suis presque sur qu'en cherchant un peu, tu trouveras quelqu'un qui a crée un composant qui le fait ^^

Fabien
Nathalie
20 mai 2011

Bonjour, encore moi.

Mais cette fois, je suis passée à beaucoup plus compliqué ... Je dois modifié le RichEditorText qui est proposé dans Flash Builder 4 (flex4), et ne pas en créer un d'où la difficulté.

Dans mon application, une personne a la possibilité de créer une question phrase à trou de ce type :
L' ... Européenne compte ... membres.

Cette phrase doit être créée par le biais d'un RichEditorText (s'ouvrant en PopUp) qui est associé à un textArea réponse dans le formulaire de création de la question. Je dois donc créer un bouton dans le RichEditorText qui permet d'insérer un blanc à l'endroit que l'on veut dans le texte de l'éditeur de texte... Je ne sais pas du tout comment on fait. J'ai regardé sur différents sites web, ils expliquent comment créer un bouton dans le RichEditorText (bien qu'après avoir testé pour ma part, je dois mal faire car ça ne marche pas). Mais le plus grand problème c'est de savoir ce qu'il faut utiliser (balises, etc) pour que ce bouton renvoie une balise autour du texte sélectionné.... J'ai bien regardé et personne à mon avis ne l'a encore fait d'où mon souci.

C'est le plus gros problème que j'ai dans la création de mon application.

Peut-être une idée éventuellement à me soumettre s'il te plaît ... ?

Merci

Nathalie
fnicollet
20 mai 2011

Salut Nathalie,
intéressant comme fonctionnalité mais effectivement difficile à mettre en place! Si je comprend bien, tu veux intégrer des balises HTML spécifiques dans ton texte à l'endroit où il peut y avoir une saisie pour ensuite pouvoir les repérer? Il faudrait en plus que tu ais un feedback visuel dans ton champ de saisie en plus pour indiquer la zone, non ?

Juste pour que je comprenne bien

Fabien
Nathalie
20 mai 2011

Hum....

Comment donner plus d'indications...

Voici la situation de mon interface application :

J'ai un formulaire de création de question phrase à trou. Dans ce formulaire, j'ai pour rédiger les différentes phrases à trous des textArea. Chaque textArea à un bouton Editer qui permet d'appeler le RTE qui lui est propre en popUpAnchor. j'ai créé un bouton Ok dans le RTE qui permet de fermer le RTE popUpAnchor.
Une chose importante, j'ai choisi de faire en sorte que l'utilisateur ne voit pas les balises de mises en forme du texte, grâce à cette function :

protected function ph1Editor_changeHandler(event:Event):void
{
phrase1.htmlText = ph1Editor.htmlText;
}

Voici le modèle de mon RTE :

Par exemple :
-un utilisateur qui voit les balises de mise en forme du texte : La vie est belle
-un utilisateur comme le mien qui ne les voit pas : La vie est belle (vie est belle en gras)
Ceci peut peut-être compliqué les choses puisqu'en mettant des blancs dans le texte, l'utilisateur ne devra pas voir les balises classiques de mises en forme, mais devra uniquement voir les balises (intitulé exemple)

Ce que je voudrais :
Je voudrais dans un premier temps créer un bouton dans le RTE qui puisse insérer une balise autour d'une partie du texte contenu dans le RTE.
Ca donnerait en format HTML un truc du style :
"L'Union européenne compte 27 membres."
En fermant le RTE le texte s'affiche (bon jusque là c'est normal, ça me fait déjà l'affichage sans les balises de mise en forme ).

Une fois ceci fait dans que ce soit dans le textArea ou dans le texte du RTE, je voudrais que seules ces balises soient visibles par l'utilisateur.

Je souhaite faire comme ceci, car ensuite quand l'utilisateur visualisera sa création, il aura la phrase avec les ... pour les trous , les mots qui étaient contenus dans la balise dans étiquettes qu'il pourra faire glisser dans les trous. (bon ça c'est un drag and drop qui aura une difficulté en plus puisque l'utilisateur peut créer des mots-pièges [ce seront des étiquettes qu'il pourra glisser dans les trous mais qui compteront comme faux], va falloir que je m'y mette aussi car je sens que je vais y arracher les cheveux).En bref, ça me servira par la suite pour un drag and drop phrase à trou.

Ca va je t'ai pas trop embrouillé ?

C'est peut-être un peu compliqué à faire ...
Etant débutante je ne sais pas dans quoi je me lance...

Nathalie

Désolé pour les codes MXML sans les balises que tu demandes.