Forum ZitePLUS

bmael

Membre

Lieu : Morbihan

Inscription : 08/06/2007

Messages : 128

Site Web

Ajouter des styles dans l'éditeur tinyMCE

Bonjour à tous.
Pour bien utiliser TinyMCE, je voudrai créer des styles qui apparaissent dans le menu styles de l'éditeur.
Comment faire ?
Merci d'avance pour votre aide.

Renaud

Membre

Inscription : 30/01/2007

Messages : 306

Re : Ajouter des styles dans l'éditeur tinyMCE

Il faut modifier le fichier tinymce.php, ligne 24 : content_css : "",
Tu mets entre les guillements le chemin de ta feuille de style, et elle sera automatiquement appliquée au contenu de l'éditeur en plus de "peupler" la liste déroulante des styles.

Par contre utilise une feuille de style spécifique (a inclure aussi dans le template, ou alors dont tu copies le contenu dans la feuille de style de base) et non celle du site : pour des raisons de mise en oeuvre de tinymce les déclarations de style "globales" (body, html...) foutent un peu le boxon.
reportes toi à la doc TinyMCE si tu veux creuser le sujet.

---

Ubuntu Rocks

bmael

Membre

Lieu : Morbihan

Inscription : 08/06/2007

Messages : 128

Site Web

Re : Ajouter des styles dans l'éditeur tinyMCE

En fait, j'ai eu le même problème sur joomla! Je vais suivre tes conseils et créer une nouvelle feuille de styles.
Merci pour ton aide.

bmael

Membre

Lieu : Morbihan

Inscription : 08/06/2007

Messages : 128

Site Web

Re : Ajouter des styles dans l'éditeur tinyMCE

Non, décidément, je n'y arrive pas.
J'ai trouvé cet article : http://www.libratoi.net/2008/04/01/appl … c-tinymce/
Mais je n'y arrive pas non-plus en suivant les indications. Tout le reste est en anglais et je ne capte pas tout.
Est-ce qu'un utilisateur de Zite l'a fait et.... comment ? ;-I

Merci pour votre aide

Renaud

Membre

Inscription : 30/01/2007

Messages : 306

Re : Ajouter des styles dans l'éditeur tinyMCE

Je l'ai déjà fait, et ça marche très bien.

Pense à noter l'url de ta feuille de style en relatif par rapport à la racine du site, genre "/mon_style.css" ou "/mon_site/mon_style.css"

Pense aussi que la modif peut ne pas être visible immédiatement pour des raisons de cache.

Mais si le chemin est bon et si le cache est vidé il n'y a pas de raison que ça ne marche pas.

** EDIT : je viens de refaire un essai à l'instant, sans aucun soucis. Je pense que c'est vraiment un soucis de chemin (je suppose que tu as bien des classes définies dans ta css).

---

Ubuntu Rocks

bmael

Membre

Lieu : Morbihan

Inscription : 08/06/2007

Messages : 128

Site Web

Re : Ajouter des styles dans l'éditeur tinyMCE

Voici le CSS tinystyles.css :

img {border: none;}
h1 {font-size: 150%;}
h2 {font-size: 130%;}
h3 {font-size: 120%;}
h4 {font-size: 110%;}
h5 {font-size: 100%;}

a {
    color: #3366FF;
    text-decoration: none;
}

.rouge {
    color: #red;
    text-decoration: none;
}

Et le code dans tinymce.php :

<script language="javascript" type="text/javascript" src="tinymce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
    tinyMCE.init({
        mode : "exact",
        elements: "source",
        theme : "advanced",
        verify_html: true,
        cleanup_on_startup : false,
        inline_styles : true,
        language: "fr",
        width: "100%",
        height: "550",
        plugins : "style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,flash,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable",
        theme_advanced_buttons1_add_before : "save,newdocument,separator",
        theme_advanced_buttons1_add : "fontselect,fontsizeselect",
        theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,separator,forecolor,backcolor",
        theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
        theme_advanced_buttons3_add_before : "tablecontrols,separator",
        theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_path_location : "bottom",
        content_css : "/tinystyles.css",
        plugin_insertdate_dateFormat : "%d-%m-%Y",
        plugin_insertdate_timeFormat : "%H:%M:%S",
        extended_valid_elements : "hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
        external_link_list_url : "link_list.php",
        external_image_list_url : "image_list.php",
        flash_external_list_url : "link_list.php",
        theme_advanced_resize_horizontal : false,
        theme_advanced_resizing : true
    });

</script>
J'ai essayé avec une url relative, puis l'url complète. Aucune différence. Si je mets le fichier css avec tinymce.php dans le répertoire /zite/, puis-je mettre {content_css : "tinystyles.css"} tout court comme chemin ?
En tout cas, ça ne marche pas mieux.
Bien sûr, j'ai bien vidé le cache du navigateur à chaque essai...
J'ai essayé de mettre le fichiers css à différents endroits.
Dernièrement : à la racine du site (dans le répertoire /www/ d'ovh) avec "/tinystyles.css"
Rien à faire
Merci pour ton aide

Renaud

Membre

Inscription : 30/01/2007

Messages : 306

Re : Ajouter des styles dans l'éditeur tinyMCE

Je ne vois pas l'erreur. Sauf bien sur lorsque tu mets la css dans le répertoire zite avec tinymce.php : ce répertoire là est inaccessible au navigateur, et donc à tinyMCE.

Si ton site est à la racine (dans le www) et que tinystyles.css y est aussi ton réglage devrait fonctionner : tu devrais avoir (dans l'éditeur) les liens de la couleur indiquée par la css, et avoir "rouge" dans le sélecteur de styles.

Donc là, je ne vois rien de mieux à te dire, désolé;

---

Ubuntu Rocks

bmael

Membre

Lieu : Morbihan

Inscription : 08/06/2007

Messages : 128

Site Web

Re : Ajouter des styles dans l'éditeur tinyMCE

Merci en tout cas. Je te tiens au courant.