Des styles dans tinyMCE

Bonjour à tous.
Je cherche à mettre des styles dans le menu déroulant de tinyMCE.
J'utilise le CMS Zite avec tinyMCE.
J'ai fais beaucoup d'essais. Il semble qu'il y ait un problème au niveau de l'url renvoyant vers la feuille de style dans tinymce.php :

 tinyMCE.init({
...
        content_css : "/tinystyles.css",
...
    });

Voici la structure du site actuellement :

/www/Mon_zite/zite/tinymce.php
/www/tinystyles.css
J'ai essayé de mettre la feuille de styles un peu partout. J'ai essayé d'indiquer une url absolue ou relative. Voir ici.
J'ai l'impression que je n'arrive pas à donner la bonne url vers la feuille de style.
Bien sûr, je vide le cache du navigateur à chaque essai...
La plupart des site parlant de tinymce sont en anglais et je peine beaucoup.

Merci d'avance pour votre aide.;)

J'ai la même difficulté sous Joomla 1.5 avec tinyMCE.
Modifié par bmael (08 Nov 2008 - 18:41)

J'ai un peu avancé dans Joomla! :
après divers essais, j'ai bien les styles qui apparaissent dans le menu déroulant "Styles" de TinyMCE, mais ils n'agissent pas sur la mise en forme du texte.

Pour info :
- dans les paramètres de TinyMCE, "class CSS du template" est réglé sur "non" et le chemin de class personalisée pointe vers : template/mon-tpl/css/editor.css
- j'ai ajouté les mêmes classes dans la feuille de style template/system/css/editor.css

Par exemple : j'ai une class nommée .rouge qui met le texte en... rouge ( ). Je sélectionne du texte et applique le style "rouge" que je trouve dans la liste de styles dans Tiny. Il ne se passe stictement rien... .

Pourquoi je vois les styles et quand je les appliques ils n'agissent pas ?

Si quelqu'un a une idée

Il semble que personne ne met de style dans tinymce. C'est pourtant l'intérêt d'un éditeur, non ?

Bonjour,
Je me sens un peu seul.

Bon,
J'avance quand-même. Par soucis que mon post serve à quelqu'un, voici la suite des évènements :

J'ai créé des styles dans le fichier editor.css de mon template. (celui-ci sert à voir l'effet lorsqu'on applique un style dans l'éditeur)
J'ai ajouté les mêmes styles dans le fichier template.css (celui-là pour que le style soit effectif lorsqu'on visite la page) d'après ce que j'ai compris.

Dans configuration du plugin tinymce, j'ai mis "non" à "utiliser le css de mon template" et ai donné le chemin du fichier editor.css pour les class personnalisées.
Donc, ça marche enfin, je peux appliquer des styles que j'ai créés au préalable.

Sauf... pour les images de fond. Je ne parviens pas à indiquer le bon chemin visiblement.
Pourtant ça ne doit pas être sorcier étant donné que mes images sont dans "images" comme de bien naturel. Pour être sûr j'ai essayé en indiquant l'url absolue, mais rien n'y fait.

Si toutefois quelqu'un avait une idée...

Peut-être es-tu le seul sur ce forum à utiliser TinyMCE

Ce n'est pas que je l'utilise vraiment, mais je mets en place des sites que les utilisateurs pourront facilement alimenter ensuite sans rien connaître au CSS et HTML... en théorie.
Je ne pense pas être le seul à réaliser des sites pour quelqu'un d'autre.

En fait, j'ai le même post sur le forum de Joomla avec autant d'interlocuteurs qu'ici.

Bref, je ne sais plus vers quels seins me tourner

bmael a écrit :
Ce n'est pas que je l'utilise vraiment, mais je mets en place des sites que les utilisateurs pourront facilement alimenter ensuite sans rien connaître au CSS et HTML... en théorie.
Je ne pense pas être le seul à réaliser des sites pour quelqu'un d'autre.

En fait, j'ai le même post sur le forum de Joomla avec autant d'interlocuteurs qu'ici.

Bref, je ne sais plus vers quels seins me tourner

Peut-être le forum de la communauté TinyMCE ?

Of course. Dear. I just have to learn english before.

Hop, je ne sais pas si tu a résolu ton problème, mais dans tous les cas :

Je te conseille fortement d'indiquer une url absolue pour le feuille de style, au moins tu sera sur qu'il la charge correctement. Les différents fichiers de tinyMCE étant chargés depuis différents dossiers, les urls peuvent parfois être assez compliquées à comprendre. C'est d'autant plus compliqué quand tu passes par la compression Gzip integrée d'ailleurs. Donc dans le doute, laisse des url absolues.

Ensuite, comme tu l'a déjà fait, garde ton cache désactivé, pour le forcer à recharger la feuille de style à chaque fois. Comme je disais, les éléments sont chargés dynamiquement, et le cache peut ne pas fonctionner correctement et ne pas te recharger certains éléments malgré qu'ils aient été modifiés.

Et pour finir, dans ta feuille de style de content_css, fais bien préciser tes sélécteurs par .mceContentBody pour bien cibler.

a écrit :
Hop, je ne sais pas si tu a résolu ton problème, mais dans tous les cas :

Je te conseille fortement d'indiquer une url absolue pour le feuille de style, au moins tu sera sur qu'il la charge correctement. Les différents fichiers de tinyMCE étant chargés depuis différents dossiers, les urls peuvent parfois être assez compliquées à comprendre. C'est d'autant plus compliqué quand tu passes par la compression Gzip integrée d'ailleurs. Donc dans le doute, laisse des url absolues.

Ensuite, comme tu l'a déjà fait, garde ton cache désactivé, pour le forcer à recharger la feuille de style à chaque fois. Comme je disais, les éléments sont chargés dynamiquement, et le cache peut ne pas fonctionner correctement et ne pas te recharger certains éléments malgré qu'ils aient été modifiés.

Et pour finir, dans ta feuille de style de content_css, fais bien préciser tes sélécteurs par .mceContentBody pour bien cibler.

Merci Tymlis

J'ai donc mis l'url absolue dans TinyMCE vers la feuille de style editor.css, et là, j'ai réussi à avoir une image en fond en mettant

url(/images/mon_image.jpg);

dans la feuille de style en question ET dans template.css

Ce qui est étrange, c'est que j'ai passé 1 h a faire toutes sortes d'essais et j'ai réussi 1 fois, par hasard à mettre une autre image en fond mais je commence à avoir mal à la tête.
En plus, sans cache et avec ma connexion foudroyante, ça met au-moins 30 seconde pour charger une page ou actualiser...

Je n'ai pas compris ta dernière phrase. Tu peux développer un peu pour un abruti comme moi

Ah effectivement, je voulais dire "préceder" et non pas "préciser".

Je disais que si tu veux styler le champ textarea de tinyMCE, par exemple pour changer la taille de texte ou réduire l'espace entre les paragraphes, alors mettre de simples selecteur du genre body {} ou p {} n'a pas fonctionné pour moi, j'ai du être plus précis et indiquer body.mceContentBody{} et .mceContentBody p {}

Sinon, regarde du coté de la compression GZip de tinyMCE. Ca te permet de grandement accélerer le chargement de l'éditeur.

Si je puis me permettre, si jamais la question est toujours d'actualité et que ça peut en aider d'autres :

Pour proposer des styles CSS au sein de tinyMCE et qu'ils soient retrouvés côté public par la suite ce n'est en fait pas plus compliqué que ça : il faut les avoir en deux endroits !

L'un est dans la feuille de style qui sera appelée côté public, l'autre dans la feuille de style appelée par TinyMCE au moment où on l'utilise : tiny-mce/themes/advanced/skins/default/content.css

Et là, magie, la liste déroulante "style" prend en compte classes et ids qui auront été saisis dans la feuille en question. (Attention, ne pas oublier de vider le son cache)

en jommla 1.5 il faut éditer la css de tiny
/templates/system/css/editor.css

ca oblige à être très attentif aux héritages.

il est aussi nécessaire, surtout si on développe sous FF de se méfier du cache (et le désactiver momentanément de FF avec la webdev toolbar pour constater la bonne application des modif dans la console)

bmael a écrit :
j'ai une class nommée .rouge qui met le texte en... rouge ( ).

Dans le genre erreur à ne pas faire...
Une classe "avertissement", "erreur" ou "important" (suivant le type de contenu prévu) serait plus adaptée. Si à l'avenir ces contenus doivent passer dans un cadre gris avec une icône en fond à gauche et du texte orange sombre, tu auras l'air malin à redéfinir ainsi ta classe "rouge"... ou à reprendre tous les contenus.

kreuhn a écrit :
Pour proposer des styles CSS au sein de tinyMCE et qu'ils soient retrouvés côté public par la suite ce n'est en fait pas plus compliqué que ça : il faut les avoir en deux endroits !

Ah ben oui, si un style n'est pas vu par le navigateur, il ne peut pas être appliqué.
Pour éviter de dupliquer les styles, on peut avoir une feuille de styles avec ces styles de texte disponibles pour l'édition, et l'appeler aussi bien côté front que back-office.