Fork me on GitHub
… ou une occasion d’apprendre

WYMeditor, un éditeur web intégré

Posté le 10 février 2007 à 14:21

Quand il s’agit de permettre à l’utilisateur d’un site web d’ajouter du contenu avec des options de mise en forme on est face à à un choix quand à la solution à apporter à ce problème : intégrer une solution de tag (BBCode, Textile, …) ou d’utiliser un éditeur intégré (FCKeditor, …), ces deux solutions ont leurs avantages et défauts.

Pour la première on maitrise mieux l’aspect final du contenu, elle oblige l’auteur à se concentrer sur la structure du contenu et non pas la forme de celui-ci en lui permettant d’indiquer les titres ou paragraphes par exemple sans pouvoir jouer sur la taille ou la couleur du contenu pour finalement donner un résultat peut heureux. En contre partie il faut un temps d’apprentissage et cette tâche est assez peut intuitive, si elle est à la porté des utilisateurs elle les rebutes beaucoup.

Pour la seconde nous avons une solution plus intuitive et qui demande beaucoup moins d’apprentissage, l’utilisateur est face à un outils qui ressemble à son éditeur de texte habituel et il se rend compte immédiatement du résultats de son travail. Par contre il lui permet souvent de faire tout et surtout n’importe quoi, la structure du contenu ne ressemble à rien car il va souvent mettre en gras ou grossir la taille des caractères pour faire un titre, c’est un gros problème pour la cohérence dans la mise en forme d’un site et pour son accessibilité puisque la mise en forme est directement lié au contenu.

C’est entre ces deux solutions que viens se placer WYMeditor avec une idée intéraissante : offrir un éditeur intégré qui permette à l’utilisateur d’avoir un aperçus de son travail dans un cadre intuitif sans pour autant nuire à la cohérence de la mise en forme final en évitant d’ajouter des informations de mise en forme dans le contenu. Le principe est simple, l’éditeur rend un texte mis en forme simple, on y voie les titres, gras, italique, images, … mais celle-ci est basée sur des styles prédéfini. Ce son donc des class qui sont attaché aux balises entourant le contenu et la mise en forme est maitrisé par des feuilles de styles qui peuvent naturellement changer dans le temps sans remettre en question la mise en forme du contenu créer par l’utilisateur.

Pour résumé nous avons le confort d’un éditeur WYSIWYG tout en permetant de se concentrer sur la structure du texte en permetant d’assurer une mise en forme cohérente et flexible dans le temps.

Pour vous faire une idée je vous conseil la démo où on se rend bien compte que la srtucture du texte est mise en avant, l’auteur défini les titres et paragraphe, peut décider de mettre des éléments en gras par exemple ou qu’un paragraphe doit être un side block. Avec l’icone contenant une petite loupe en haut à droite on peut se rendre compte du résultat final et du fait qu’il est bien possible de changer de feuille de style à volenté sans que cela pose problème.

Ce projet est encore jeune, mais c’est exactement ce que je recherchai pour intégrer dans les applications web qui demande un éditeur intégré.