Customizable RichTextEditor

Posté par gaetan.collaud sur 18 septembre 2011 Laisser un commentaire (0) Aller vers les commentaires

Le champ RichTextEditor est bien pratique si l’on veut laisser à l’utilisateur une certaine liberté de mise en forme des textes. Seul problème, on ne peut pas choisir quels éléments d’édition (gras, italic, liste des polices,…) afficher ou pas.

Voici donc un composant qui résout le problème :

<?xml version="1.0" encoding="utf-8"?>
<mx:RichTextEditor xmlns:fx="http://ns.adobe.com/mxml/2009"
				   xmlns:s="library://ns.adobe.com/flex/spark"
				   xmlns:mx="library://ns.adobe.com/flex/mx"
				   creationComplete="creationComplete()">
	<fx:Script>
		<![CDATA[
			[Bindable] public var displayAlignButtons:Boolean = true;
			[Bindable] public var displayFontList:Boolean = true;
			[Bindable] public var displayFontSizeList:Boolean = true;
			[Bindable] public var displayBoldButton:Boolean = true;
			[Bindable] public var displayItalicButton:Boolean = true;
			[Bindable] public var displayUnderlineButton:Boolean = true;
			[Bindable] public var displayColorPicker:Boolean = true;
			[Bindable] public var displayBulletButton:Boolean = true;
			[Bindable] public var displayLinkField:Boolean = true;
 
			protected function creationComplete():void{
				if(!displayAlignButtons) alignButtons.parent.removeChild(alignButtons);
				if(!displayFontList) fontFamilyCombo.parent.removeChild(fontFamilyCombo);
				if(!displayFontSizeList) fontSizeCombo.parent.removeChild(fontSizeCombo);
				if(!displayBoldButton) boldButton.parent.removeChild(boldButton);
				if(!displayItalicButton) italicButton.parent.removeChild(italicButton);
				if(!displayUnderlineButton) underlineButton.parent.removeChild(underlineButton);
				if(!displayColorPicker) colorPicker.parent.removeChild(colorPicker);
				if(!displayBulletButton) bulletButton.parent.removeChild(bulletButton);
				if(!displayLinkField) linkTextInput.parent.removeChild(linkTextInput);
			}
		]]>
	</fx:Script>
</mx:RichTextEditor>

Et voici un exemple d’utilisation :

<custom:CustomRichTextEditor width="100%" height="100%"
	displayFontList="false"
	displayLinkField="false"
	id="description"
	htmlText="{description}" />

Ici je supprime la liste des polices ainsi que le champ permettant d’ajouter des liens hypertextes.

Astuces, Flex

Laisser un commentaire