Appliquer des styles CSS à un élément de contenu WYSIWYG avec TinyMce
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.
- tinyMCE.init({ ...
- content_css : "tinyclasses.css" // relatif à http://domaine.com/mon_site/tinyclasses.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 :
- tinyMCE.init({...
- 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;"
- });
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;}
avril 12th, 2008 at 19:17
Libratoi ! Where are you ?!!
avril 12th, 2008 at 20:26
Eh bien tu vois je suis là !
décembre 15th, 2009 at 10:35
Merci bien, très bonne astuce.
Sauf que j’ai la liste mais le style ne s’applique pas
décembre 15th, 2009 at 11:04
Hanen, sûrement un problème avec ta définition du “content_css”.
Si le style ne s’applique pas, c’est que la feuille de style que tu veux lier via cette balise est soit non trouvée, soit les styles voulus n’y sont pas présents.
décembre 15th, 2009 at 11:23
Oui ça marche, vous avez raison j’ai oublié de lier la feuille de style à la page appelante.
Merci pour l’astuce et pour cette réponse rapide
janvier 14th, 2010 at 18:33
Mais est-ce possible par ce procédé de sélectionner une balise en patriculier : dans l’exemple ci dessus, je voudrais que
la selection de rouge me mette une balise h1#rouge
la selection de gamme h2.gamme
…
?
merci d’avance
janvier 15th, 2010 at 10:30
Non pas dans cet exemple ci.
A moins de faire un h1 avec la liste des blockformats ( http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/theme_advanced_blockformats ), puis d’y mettre une classe avec l’exemple de l’article.
Peut-être qu’un plugin existe (pas à ma connaissance) pour faire ça en une seule manip, mais tu peux aussi faire çà “à la main” via les listBox : http://tinymce.moxiecode.com/examples/example_16.php