Carnet Web de Bastien Jaillot

Utilisation de YUI Editor un peu avancée

Note publiée le .

Pour les besoins d'openwechange[1] , j'ai eu besoin de choisir un éditeur WYSIWYG. Je détesté allègrement ces éditeurs [2] mais je ne suis pas le public visé par ce service et mes "clients" désiraient du wysiwyg afin de permettre le c/c depuis Microsoft Word© ou n'importe quelle site[3].

Dans mes pérégrinations j'ai eu l'occasion de re-découvrir YUI Editor que je pense être le moins pire. Il me fallait pour celui-ci :

Etant donné que je ne dois pas être le seul à vouloir faire ça, voici le lien qui fait tout : yuieditor.js sur openwechange.

Il faut ensuite un peu de CSS pour gérer les icônes :

.yui-skin-sam .yui-toolbar-container .yui-toolbar-youTube span.yui-toolbar-icon {
     background-image: url(YOUR IMAGE);
     background-position: 1px 0px;
}
.yui-skin-sam .yui-toolbar-container .yui-toolbar-dailymotion span.yui-toolbar-icon {
      background-image: url(YOUR IMAGE');
      background-position: 1px 0px;
}

N'oubliez pas d'insérer quelque part la classe yui-skin-sam. Dans le cas contraire, changez les CSS de la lib yahoo ;). (Personnellement je ne m'y suis pas aventuré).

Pour faire fonctionner l'upload de fichier, je vous conseille de lire l'article pointé. Il faut retourner des données en en-tête text/html et doit contenir du JSON. Pourquoi pas...

Si on me le demande, je mettrais une démo en ligne. Sinon, ça attendra la mise en ligne d'un site sur openwechange. Et ça ce n'est pas gagné :D.

Notes

[1] Le moteur open source de http://wechange.fr (design PAS DE MOI)

[2] RIEN ne vaut la syntaxe wiki:like à mon goût

[3] Quelle horrible pratique