tiny mce enlève des balises du code html de yootheme demo package

[grosloulou]

Re : tiny mce enlève des balises du code html de yootheme demo package

oups j'avais pas vu que h2... avaient été supprimés.
ton code va super bien si je n'autorise rien dans tinymce. evidemment les <i> sont enlevés.
j'ai essayé filtres de texte aucun filtre et liste noire par défaut partout sauf super utilisateur=aucun filtre et même résultat.
j'ai trouvé le coupable ! c'est la ligne que tu m'as demandé d'ajouter dans tiny mce.
il n'autorise que les i et a !!! sans doute parce que tu as écrit "#" ?
en fouillant sur le site yootheme, ils conseillent :
,+a[*],+i[*],+em[*],+li[*],+span[*],+div[*],
donc la solution était peut-être le "+" pour ajouter et non remplacer ???

j'ai essayé cette ligne et de nouveau h2 est supprimé , j'ai du code kilométrique à partir d'un moment (sans doute comme tu l'as dit des balises manquantes) mais les i restent et en mode visualisation de site j'ai des bullets rond noir suivis des bullets yoouteme en "V"

il semble y avoir un problème avec cette autorisation dans tinymce qui remplace plutôt que d'ajouter

au fait il y a une deuxième boite elements autorisés :
,@[data-lightbox],@[data-spotlight]


marc

[Rajoz]

Re : tiny mce enlève des balises du code html de yootheme demo package

Bonjour grosloulou,

au fait il y a une deuxième boite elements autorisés :
,@[data-lightbox],@[data-spotlight]

Et bien voilà probablement la cause du problème !
Dans mon post #2 j'avais indiqué :

TinyMCE n'autorise pas par défaut la balise <i>. Pour l'autoriser, il faut aller dans le plugin TinyMCE et ajouter au paramètre "Éléments autorisés" (attention il s'agit du deuxième "Éléments autorisés", le dernier de la liste des paramètres) : +i[class|style]

Il y a effectivement deux paramètres qui sont tous les deux appelés "Éléments autorisés" :

• Le premier est une liste blanche des balises autorisées, il restreint TinyMCE aux balises que l'on y a indiqué et il supprime toutes les autres balises => il ne faut rien y mettre (par défaut TinyMCE autorise un mélange de HTML4 et HTML5)
• Le deuxième comporte les balises additionnelles que l'on souhaite que TinMCE autorise en plus => c'est là qu'il faut mettre les balise que l'on veut en plus comme <i>

En mettant <i> et <a> dans le premier paramètre, cela a limité TinyMCE à ne valider que ces deux balises et donc à supprimer toutes les autres (<h2, <p>, <ul>, <li>, etc.) d'où le code au kilomètre.

Apparemment il y a déjà quelque chose chez toi pour le deuxième paramètre. Il faut simplement ajouter (avant ou après) le code que j'ai indiqué (ou celui du site YOOtheme voir ci-après) en le séparant de celui existant par une virgule ",".

en fouillant sur le site yootheme, ils conseillent : ,+a[*],+i[*],+em[*],+li[*],+span[*],+div[*],

La syntaxe est expliquée sur le lien TinyMCE que j'avais indiqué : http://www.tinymce.com/wiki.php/Conf...valid_elements

• Les balises à valider sont séparées par des virgules "," et il ne faut pas mettre d'espace
• Les attributs sont indiqués entre crochets "[]" et séparés par des barres verticales "|", on peut utiliser des signes génériques (wildcards) comme *
  i[class|style] indique que TinyMCE acceptera <i class="xxx" style="yyy"> mais rejettera <i id="zzz">
  i[* ] indique que tous les attribut seront acceptés (j'ai dû mettre un espace pour ne pas que l'éditeur du forum me supprime le *)
• le caractère avant la balise précise le contrôle supplémentaire à faire sur la balise :
  "+" permet de contrôler automatiquement les balises ouvertes sans fermeture, par exemple avec +li en tapant <li>texte1<li>texte2 (sans les </li>), TinyMCE transformera automatiquement en <li>texte1</li><li>texte2</li>
• "#" ajoute un espace aux balises vides par exemple avec +a, <a></a> devient <a>&nbsp;</a>, TinyMCE utilise par défaut #p, c'est pour cela que les lignes vides sont codées <p>&nbsp;</p>

Les balises indiquées sur le site YOOtheme (+a[*],+i[*],+em[*],+li[*],+span[*],+div[*]) sont correctes, mais :

• certaines balises comme <li> sont déjà valides pour TinyMCE. Ajouter par exemple +li va permettre si l'on oublie un </li> que TinyMCE l'ajoute automatiquement. Cela peut être intéressant mais personnellement je préfère ne mettre que les balises qui me posent réellement problème (comme ici <a> et <i>) pour ne pas risquer d'interférence dans mon code avec les autres balises
• le "+a" ne résoudra pas le problème que tu avais posé dans le premier post (<a href="#" class="uk-icon-button uk-icon-github"></a>) où la balise <a> disparaissait parce qu'il n'y avait rien entre le <a> et le </a>. Pour résoudre ce problème il faut mettre #a

Amicalement,
Rajoz

[grosloulou]

Re : tiny mce enlève des balises du code html de yootheme demo package

salut rajoz,
tout est clair, tout fonctionne avec tinymce et sur le site

un tout grand merci pour ta patience et tes explications

faut épingler ce tuto :-)

marc