Besoin d’un éditeur de texte riche

7 09 2009

Dans le cadre de mon projet, j’ai besoin de permettre aux “usagers” (je fais comme à la SNCF, en fait j’espère que ce seront de bons clients qui paient cher!) d’éditer eux-mêmes du texte. Mais comme je veux ce qu’il y’a de mieux pour mes cliutilisateurs, il faut qu’ils puissent faire un peu de mise en forme sur ces textes et -surtout- qu’ils puissent intégrer facilement des images. Et quand je parle d’images, j’entends des fichiers stockés sur leur disque dur. Et de mon côté j’ai besoin de récupérer ce texte en HTML pour pouvoir le réafficher par la suite.

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 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

Tiny mce

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

CK Editor

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

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

Faire suivre cet article :
  • Facebook
  • Twitter
  • Google Bookmarks
  • Yahoo! Buzz
  • Wikio FR
  • LinkedIn
  • Viadeo
  • del.icio.us
  • Digg
  • MySpace
  • Netvibes
  • Technorati

Actions

Informations

Laisser un commentaire

Vous pouvez utiliser ces balises html : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>