THELIA Forum

Welcome to the THELIA support and discusssion forum

Announcement

Rejoignez la communauté sur le Discord Thelia : https://discord.gg/YgwpYEE3y3

Offline

#1 TinyMCE : CSS perso

(26-09-2017 16:58:22)


Bonjour à tous,

J'ai essayé de créer des style perso pour le tinyMCE, mais ça ne marche pas.

Quelqu'un pourrait m'expliquer comment faire comme si j'étais un enfant de 5 ans ? J'ai essayé plein de choses, mais pas moyen...

Merci d'avance de vos explications.

Offline

#2 Re: TinyMCE : CSS perso

(26-09-2017 20:38:34)


Tu as essayé de définir tes styles dans la zone réservée à cet effet dans la configuration du module TinyMCE ?


OpenStudio Toulouse

Offline

#3 Re: TinyMCE : CSS perso

(27-09-2017 09:21:00)


Oui, il apparaissent bien de le cadre, mais si on fait "insérer/modifier une image", on voit la class responsive, mais pas les persos...
On doit faire comment pour s'en servir ?

Offline

#4 Re: TinyMCE : CSS perso

(27-09-2017 13:07:28)


As tu coché la case "Afficher la barre de menu TinyMCE " ?


OpenStudio Toulouse

Offline

#5 Re: TinyMCE : CSS perso

(27-09-2017 15:11:21)


Oui.
En fait, je ne regardais pas au bon endroit. Ils sont dans "Format > Formats" !

Merci encore de ton aide !

Offline

#6 Re: TinyMCE : CSS perso

(19-10-2017 13:40:15)


Ben, en fait, je vois bien les css que j'ai créé dans le menu Formats. Mais pas moyens de s'en servir sur une image...
Une piste?

Last edited by GillesL (19-10-2017 13:45:47)

Offline

#7 Re: TinyMCE : CSS perso

(20-10-2017 16:26:16)


J'ai trouvé en solution en partant de ce "tuto" : https://www.sois-net.fr/class-css-images-liens-tinymce/

Dans le module Tinymce, j'ai modifié 2 fichiers :

local\modules\Tinymce\templates\backOffice\default\tinymce_init.tpl
local\modules\Tinymce\templates\backOffice\default\assets\css\editor.less

Dans le fichier tinymce_init.tpl, à la ligne 81, j'ai rajouté :

{
                    title: '{intl l='Image à Gauche'}', value: 'tiny-mce-img-left'
 },
 {
                    title: '{intl l='Image à Droite'}', value: 'tiny-mce-img-right'
 },

et dans editor.less, pour les css soit prise en compte dans l'éditeur, j'ai mis :

 .tiny-mce-img-right{
    display: block;
    max-width: 100%;
    height: auto;
    float: right;
    margin: 0 0 15px 15px;
}
.tiny-mce-img-left{
    display: block;
    max-width: 100%;
    height: auto;
    float: left;
    margin: 0 15px 15px 0;
}

J'ai également mis le code ci-dessus dans la css du thème front office que j'ai fait pour qu'il soit accessible dans la partie publique.

En gros, maintenant, on peut choisir les classes pour câler une image à droite ou à gauche.

ATTENTION ! Il faut que l'option qui met la class img-responsive soit décochée pour que ça marche.

Pour faire évoluer le module en ce sens, il faut que je contacte son auteur, non ?
Je pourrais l'aider ou plutôt, il pourra m'aider pour que j'implémente cela d'une façon plus propre et plus officiel dans son module.