Drupal : Module TinyMCE et les CSS

Posted on 21/12/2007 · Posted in Drupal

Pour utiliser les styles avec TinyMCE, il faut dans un premier temps créer une feuille de style qui sera dédier à TinyMCE.
Par convention, on va créer la feuille dans le répertoire de notre thème et l'appeler 'tinymce.css'.
Si vous voulez quelques conseils pour créer votre feuille de style, je vous laisse parcourir Alsacréation avec attention.

Dans la feuille de style nouvellement crée, on va retrouver des classes CSS qui ne servent qu'à la mise en page de nos nœuds (ou 'node' en anglais).
N'oublier pas que les styles présents dans tinymce.css devront être présent dans la feuille de votre thème.
En effet, tinymce.css sera utilisé par TinyMCE mais pas par votre navigateur lors de l'affichage normal des pages, qui utilisera par défaut style.css présent dans votre thème.

Prenez l'habitude de donner des noms explicites à vos classes, n'hésiter pas à écrire 'texte_rouge' pour une classe qui mets le texte en rouge, ou 'table_bord_orange' pour un tableau avec une bordure orange.

Ensuite, il faut passer du coté de l'administration de votre site, rendez-vous sur 'Accueil » Administrer » Configuration du site » TinyMCE' (ou en anglais 'Home » Administer » Site configuration » TinyMCE').

Dans 'Site configuration » TinyMCE', éditer le profile que vous utilisez pour modifier vos pages avec TinyMCE, et dérouler la partie CSS qui se trouve normalement en bas.
Choisir 'define css' dans 'Editor CSS' qui permet de spécifier une feuille de style qui sera utilisé par TinyMCE.
Mettre le chemin dans CSS Path, qui, si vous avez suivi les conseils de mon tuto sera '%h/%t/tinymce.css'

Dans la case CSS Classes, on va pouvoir donner des noms encore plus convivial que ceux présents dans votre feuilles de styles.
Pour cela, il suffit de mettre à la suite :
'Mon texte en rouge=text_rouge;Tableau bordure orange=table_bord_orange'
Où 'Mon texte en rouge' sera le nom qui apparaîtra dans TinyMCE et qui correspondra au style 'text_rouge'.
Noter bien qu'à la fin de cette ligne, il n'y a pas de ';'.

PS : Si quelqu'un connaît une solution pour éviter d'avoir à dupliquer les styles entre tinymce.css et style.css avec une sorte d'importation, je suis preneur.