Archives pour la catégorie RichTextEditor

Squiggly, correcteur d’orthographe Made in Adobe

Encore une nouvelle librairie venue des Adobe Labs avec cette fois un nom difficilement prononçable pour nous francophones, Squiggly. Squiggly est une librairie permettant d’ajouter facilement un correcteur d’orthographe à des applications Flex et Air. Il peut être ajouté sur n’importe quel composant Flex 3 de texte (TextInput, TextArea, RichTextEditor).

Allez Sur la page officielle de Squiggly

Voir l’application d’exemple de Squiggly

Utilisation de Squiggly

L’utilisation est très simple, il suffit d’appeler une méthode static de la class SpellUI en lui passant le composant sur lequel Squiggly doit agir, et le dictionnaire à charger:

SpellUI.enableSpelling(sta, "usa.zwl");

Pour le choix du fichier dictionnaire, vous avez le choix. Vous pouvez utiliser le dictionnaire English qui est livré avec Squiggly, ou utiliser l’utilitaire DictionaryGenerator.air pour compiler votre propre liste de mots.

Lire la suite →

Flex Tips – Obtenir un texte HTML valide à partir du RichTextEditor (htmlText)

Le composant Flex RichTextEditor permet d’avoir un champ texte « riche », c’est-à-dire avec des options de formatage un peu comme celles qu’on trouve dans Word (gras, souligné, alignement, puces…). Ce composant peut-être très pratique pour laisser un utilisateur créer du contenu HTML facilement, sans qu’il ne sache comment écrire du HTML, pour un CMS par exemple ou une plate-forme de blog.

Le composant RichTextEditor (RTE) a une propriété « htmlText », qui permet d’assigner du texte HTML et une propriété « text » qui permet d’avoir le contenu brut, sans balises.

Si par exemple, vous écrivez dans votre RichTextEditor:

This is <b> Bold </ b> text.

Vous obtiendrez par la propriété « htmlText », quelque chose comme:

<TEXTFORMAT LEADING="2">
<P ALIGN="LEFT">
<FONT FACE="Verdana" SIZE="10" COLOR="#0B333C" LETTERSPACING="0" KERNING="0">
This is <b> Bold </b>text.
</FONT>
</P>
</TEXTFORMAT>

Comme vous le voyez, Flex rajoute beaucoup de code HTML non-nécessaire. De plus, ce code pseudo-html ne sera pas interprété par une page HTML classique (TEXTFORMAT n’est pas une balise HTML par exemple).

Dans notre cas, on veut que le contenu HTML inscrit par l’utilisateur soit directement utilisable pour une intégration dans du HTML. Certains ce sont posé la question, sur le blog Thanks Mister. La solution se trouve dans les Expressions Régulières AS3. Avant de passer aux choses sérieuses, voici quelques articles qui devraient vous aider à comprendre les RegExp:

Lire la suite →

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:

RTE

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

Flex UIComponent – Les Composants de type Texte (Label, Text, TextInput, TextArea, RichTextEditor)

Il y a 5 types de composants texte, que l’on peut classer comme affichage ou comme input.

This movie requires Flash Player 11

Les composants Label et Text sont des composants d’affichage seulement. L’utilisateur ne peut pas éditer le contenu de ces types. Le composant Label est utile pour afficher une ligne de texte alors que le composant Text peut afficher plusieurs lignes à la fois.

Lire la suite →