Au cours du développement du produit, nous avons été confronté à un problème imprévu : l’intégration d’un éditeur de texte riche au sein d’une application écrite en GWT.

En effet, nous désirions laisser la possibilité à l’utilisateur de créer ou modifier une page web en mode WYSIWYG directement depuis l’application, mais l’éditeur proposé par GWT ne nous paraissait pas suffisant.

Après une rapide analyse des solutions existantes, nous avons tout d’abord décidé d’utiliser FCKeditor, celui-ci semblant offrir le plus grand nombre de fonctionnalités sur le marché à l’heure actuelle.
Nous sommes pour cela repartis de gwt-html-editor que nous avons adaptée à nos besoins. Cependant, si cette solution fonctionnait parfaitement lors de nos tests en hosted mode, dès le premier test de l’application déployée, nous avons rencontré des problèmes :

  • comportements différents selon les navigateurs
  • problèmes lors du premier chargement du composant
  • problèmes lors du rechargement du composant

Ces problèmes étant impossibles à résoudre facilement, nous avons décidé de tester les solutions concurrentes : XinhaTinyMCE et Yahoo! editor.
Mais celles-ci se sont avérées souffrir des même problèmes que FCKeditor. En effet, ces éditeurs ont été conçus pour fonctionner au sein d’une application web “classique”, et ne sont pas adaptés pour une application entièrement enAJAX, comme celles réalisées en GWT.

Suite à ce constat, nous avons choisi de privilégier une solution hybride : la visualisation du texte riche se fait dans une iframe au sein de l’application, mais son édition se fait dans une page web classique présentée en popup.

Le composant s’articule autour de trois fichiers :

  • FCKRichEditorImpl.java, le composant en lui-même
  • iframeFckEditor.html, la page web affichant le rendu au sein d’une iframe (l’iframe permet d’avoir un style propre à la page affichée, ce que ne permettait pas l’utilisation d’un setInnerHTML (), par exemple)
  • pageFckEditor.html, la page en popup permettant d’éditer le texte grâce à FCKeditor

Cette solution fonctionne parfaitement et ne souffre pas des problèmes cités précédemment, mais elle en apporte cependant deux nouveaux :

  • moins bonne intégration de l’édition de texte avec le reste de l’application
  • possibilité de problème avec les bloqueurs de popup

C’est pourquoi nous restons à l’écoute du marché, et surveillons avec attention les nouvelles solutions disponibles.

Si vous désirez le code de notre solution n’hésitez pas à nous contacter