Archive de avril, 2008

Appliquer des styles CSS à un élément de contenu WYSIWYG avec TinyMce

1 avril, 2008, Posté dans Développement web
2 Commentaires

TinyMce est un éditeur de texte pour applications web. Pour en savoir plus, voir un comparatif de plusieurs éditeurs WYSIWYG.

Des classes à disposition de l’utilisateur

Avec TinyMce, il est possible d’offrir à l’utilisateur de l’outil, la possibilité d’appliquer des styles CSS prédéfinis (classes) au contenu à mettre en forme.
Pour cela, il suffit de créer une feuille de style avec les classes voulues et de la lier à TinyMce lors de son instanciation.

Des CSS personnalisés par défaut

Le paramètre suivant permet de “surcharger” la feuille de style par défaut de TinyMce. Cela permet par exemple de mettre en forme les listes à puces du contenu WYSIWYG de la même manière que dans le reste de votre application.

  1. tinyMCE.init({ ...
  2. content_css : "tinyclasses.css"    // relatif à http://domaine.com/mon_site/tinyclasses.css
  3. });

TinyMce et les styles CSS

Dans l’exemple ci-dessus, on a une instance de TinyMce, grâce à la méthode init().
Il suffit de passer un paramètre de plus comme ceci :

  1. tinyMCE.init({...
  2. theme_advanced_styles : "Applications=tiny-appli;Les plus=tiny-plus;Gamme=tiny-gamme;Rouge=tiny-rouge;Petite taille de police=fontSize1;Taille de police normale=fontSize2;Grande taille de police=fontSize3;Image à gauche=gauche;Image à droite=droite;"
  3. });

pour obtenir une liste déroulante des classes que vous aurez définies grâce au paramètre theme_advanced_styles sous la forme : {Intitulé=class;}