Ayant un doute quant à la compatibilité de cette valeur sur tous les navigateurs (i.e. IE (c marrant ça)), je suis tombé sur le site suivant qui présente très bien les différentes valeurs de display, par des exemples, et indique également la prise en charge par les différents navigateurs. Du coup, j’ai conservé la valeur block : moins pratique, mais qui marchera partout!

Le site à voir : www.quirksmode.org/css/display.html

Il me faut donc un composant de formulaire plus évolué qu’un basique élément textarea, soit un éditeur de texte riche. Après une recherche sur Google de scripts implémentant ce besoin, j’ai éliminé les composants moches, ceux n’étant plus mis à jour depuis trop longtemps et ceux qui ne géraient pas l’upload d’image mais seulement un lien vers une image déjà présent sur le réseau et j’ai retenu une liste de 4 composants :

• Dsrte : avidansoft.com/dsrte
• TinyMce : tinymce.moxiecode.com
• CKEditor : ckeditor.com
• NicEdit : nicedit.com

DSRTE

J’ai trouvé DSRTE (pour Damn Small Rich Text Editor soit en français un sacrément petit éditeur de texte riche), en cherchant tout d’abord un script basé sur jQuery que j’utilise en tant que framework javascript.

Il contient toutes les fonctionnalités dont j’ai besoin, mis à part peut-être la possibilité d’insérer une image par une URL. Le look est par contre un peu à l’ancienne, pas très sexy…

J’avais essayé de l’installer il y a 3, 4 mois sans y parvenir… Mais je dois avouer que je n’avais trop pousser les essais non plus, je n’en avais pas encore besoin à l’époque.

Site : avidansoft.com/dsrte

TinyMCE

Très complet… trop complet… trop complexe! Les utilisateurs de mon service ne seront pas tous des geeks! Ca m’étonnerait d’ailleurs! (Vous comprendrez plus tard…) Il y a un “Image Manager” et il faut y ouvrir trois fenêtres pour pouvoir charger une image : pas assez ergonomique à mon goût.

Je n’ai pas essayé de l’installer car du coup il ne m’intéresse pas. Mais ça semble être tout de même un très bon produit, pour des besoins plus évolués peut-être.

Site : tinymce.moxiecode.com

CKEditor

Celui-ci est très très bien. Complet (insertion de Flash, de formulaires, … le tout customisable bien sur), beau (et on peut choisir d’autres skins et changer les couleurs). Bref, super sauf… la licence. Hé oui, ça a son importance aussi! Dans mon cas, j’aurai besoin d’une licence commerciale à 375$. NEXT!

Site : ckeditor.com

NicEdit

NicEdit n’offre pas des “centaines” de fonctionnalités, mais largement de quoi satisfaire la plupart des gens.
Il propose l’upload de fichier très simplement, en les envoyant par défaut sur le service imageshack, mais il est possible de les héberger soi-même en copiant un script PHP sur son serveur. Je ne l’ai pas encore fait, je ne sais pas quelle est la meilleure stratégie : sous-traiter un service et la charge qui va avec ou être indépendant (d’un arrêt de service par exemple).

Mais surtout, ce qui m’a séduit, c’est l’intégration : 1 minute et je n’exagère pas.
Il y a un fichier javascript et une image à copier.
Ensuite, dans un formulaire il suffit d’ajouter un élément textarea des plus classiques :

<textarea id="test"></textarea>

Puis un petit bout de javascript pour faire évoluer ce champ de texte en un composant riche :

var editor = new nicEditor().panelInstance('test');

Voilà, c’est tout. Ca marche nickel. Je suis convaincu.

Site : nicedit.com

Et GWT?

Ben oui, pour faire des formulaires un peu avancés, pourquoi pas GWT?

Utilisant régulièrement cette technologie pour mon boulot, la partie GWT elle-même ne m’inquiètait pas. Ce qui me faisait plus peur, c’était plutôt l’intégration avec une application PHP… Je sais que c’est possible en communiquant avec JSON, mais franchement, ce serait autrement plus complexe que la seule ligne de code ci-dessus.

Pour les motivés, un article chez IBM : XML: The bridge between GWT and PHP