[RÉGLÉ] tiny mce enlève des balises du code html de yootheme demo package

[grosloulou]

bonjour,
j'ai installé le theme yootheme unity sur ovh et en parallèle le demo package sur wamp server.
je m'étonnais que le module html "social icon" soit vide alors qu'on voit les quatre icones twitter... sur le demo package et que quand je copiais les ul, li de la page galerie du demo package, les "V" ne s'affichaient pas comme bullets.

j'ai remplacé tiny-mce par none dans le demo package et tout est devenu très clair ! de nombreux codes sont mangés par tiny-mce comme :

<i class="uk-icon uk-icon-check"></i>
dans :
<h2>Features</h2>

<ul class="uk-list uk-list-space">
<li><i class="uk-icon uk-icon-check"></i> Fully responsive including all effects</li>
<li><i class="uk-icon uk-icon-check"></i> Folder based image selection</li>
<li><i class="uk-icon uk-icon-check"></i> Supports multiple image folders</li>
<li><i class="uk-icon uk-icon-check"></i> Automatic thumbnail creation</li>
<li><i class="uk-icon uk-icon-check"></i> Supports image captions and custom links</li>
<li><i class="uk-icon uk-icon-check"></i> Uses the Widgetkit Spotlight and Lightbox</li>
<li><i class="uk-icon uk-icon-check"></i> Built with HTML5, CSS3, PHP 5.2+ and the latest jQuery version</li>
<li><i class="uk-icon uk-icon-check"></i> Works with Joomla and WordPress</li>
</ul>

et :

<a href="#" class="uk-icon-button uk-icon-github"></a>
<a href="#" class="uk-icon-button uk-icon-twitter"></a>
<a href="#" class="uk-icon-button uk-icon-facebook"></a>
dans le module custom

j'ai tiny mce (je dois encore installer jce) et impossible de copier ces codes car à chaque sauvegarde ils disparaissent.
dois-je passer en mode editor=none ?
dans ce cas, que se passera-t-il quand je reviendrai en tiny-mce ou jce et que je voudra ajouter une galerie à cette page article ?

merci
marc

[Rajoz]

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

Bonjour Grosloulou,

En plus du filtre de la configuration de Joomla!, il y a aussi un filtre dans TinyMCE qui va plus loin dans l'analyse de la syntaxe HTML. A noter que comme JCE est basé sur TinyMCE tu retrouveras le même filtre dans JCE.

<i class="uk-icon uk-icon-check"></i>
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]

Note: j'ai ajouté "style" dans les attributs autorisés parce que cela peut toujours servir de faire par exemple : <i class="uk-icon uk-icon-check" style="color: red;"></i>

<a href="#" class="uk-icon-button uk-icon-github"></a>
TinyMCE considère qu'il y a une erreur de syntaxe parce qu'il n'y a rien entre <a> et </a> et il le supprime donc.
Le plus simple c'est d'ajouter un espace non sécable &nbsp;

[COLOR=#3E3E3E]<a href="#" class="uk-icon-button uk-icon-github">&nbsp;</a>[/COLOR]

Amicalement,
RAjoz

[grosloulou]

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

merci beaucoup, j'avais mis tous les filtres de texte à aucun filtre dans configuration, je devenais fou !
par contre je ne trouve pas où je peux modifier les settings de tinymce dans joomla 3.3.3 (extensions,... ???)

marc

[SimonG]

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

Bonjour,

par contre je ne trouve pas où je peux modifier les settings de tinymce dans joomla 3.3.3 (extensions,... ???)

il fat simplement éditer le plugin "Éditeur - TinyMCE".

[Rajoz]

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

Bonjour Grosloulou,

Je viens de me souvenir que j'avais trouvé une solution plus simple que les &nbsp; pour les balises vides (sans rien entre la balise ouvrante et la balise fermante) comme <i></i> ou <a></a>. La documentation se trouve sur http://www.tinymce.com/wiki.php/Conf...valid_elements

Le code à mettre dans le paramètre Eléments autorisés est (sans espace) :

#i[class|style],#a[*]

Amicalement,
Rajoz

[grosloulou]

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

merci rajoz mais cela ne me dit toujours pas où se trouve tiny mce pour éditer ses éléments autorisés :-)

marc

[grosloulou]

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

extensions>gestion des plugins :-)

j'avais cherché ailleurs !

merci beaucoup
marc

[grosloulou]

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

zut, je ne sais pas ce que j'ai fait mais mes codes sources sont kilométriques sans passage à la ligne.
pourtant j'ai autoriser ds tiny mce comme tu as écrit, j'ai choisi éditeur tiny et le code source du copier coller du demo package a bien des passages à la ligne !?

[Rajoz]

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

Bonsoir grosloulou,

Pour éditer du code source, TinyMCE est limité en terme de mise en page et peut mettre au kilomètre certaines balises (voir exemple ci-dessous). CodeMirror est nettement meilleur.

CodeMirror prend en charge la coloration syntaxique du code, la numérotation des lignes, l'indentation, le surlignage des balises assorties, la fermeture automatique des balises, etc. Voir les paramètres de CodeMirror dans Extensions > Gestion des plugins > Editeur - CodeMirror

S'il s'agit par exemple de créer un module personnalisé pour les icônes sociales, sur lequel on ne fait habituellement pas ou très peu de modifications, le mieux c'est de modifier temporairement son compte (dans le menu en haut à droite "Modifier son compte") en choisissant CodeMirror comme éditeur.
Note : il existe une extension qui permet de basculer encore plus facilement d'un éditeur à un autre : Switch Editor

Exemple : j'ai saisi le même code, j'ai enregistré l'article, puis je l'ai réouvert pour voir comment l'éditeur avait conservé mon code.
avec TinyMCE : les <a> sont sur une seule ligne

avec CodeMirror : les sauts de ligne sont préservés

et voici le résultat en affichant dans YOOtheme Master2 (le gratuit le plus proche de Unity) :


Amicalement,
Rajoz

[grosloulou]

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

merci rajoz
cependant, avant que je touche à tinymce pour ajouter les éléments valides, le code source de l'article gallery du demo package s'affichait convenablement dans le code source et dans l'article avec des passages à la ligne sauf que dans l'article les "i" étaient supprimés.
il n'y avait que des <p>,<img>...
est-il possible qu'une option ait été modifiée relative au passage à la ligne ?
si on peut éviter de changer d'éditeur juste en autorisant des balises cela m'arrange.
en effet, pour social icons on n'y touche pas mais pour l'article gallery à chaque ajout de widgetkit galery je vais devoir penser à changer d'éditeur pour ne pas perdre mes bullets

merci
marc

[Rajoz]

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

Bonjour Marc,

L'éditeur code source de TinyMCE met en forme avec des sauts de ligne les balises de type "block" ou assimilées, comme <h1>, <ul>, <p>, <table> ou <li>. Par contre il ne le fait pas pour d'autres balises de type "inline" ou assimilées, comme <strong>, <a> ou <div>. Ce formatage est lié au type de balise pas à un paramétrage. C'est ce que montrait l'image TinyMCE de mon précédent post avec des <ul>, <li> et <a>.

Il est probable que comme avant les <i> et les <a> n'étaient pas reconnus, TinyMCE affichait correctement ce qu'il restait du code ainsi "nettoyé" comme les <p>.

Je suis surpris que tu indiques que les puces (bullets) posent problème puisque les balises <ul> et <li> sont correctement affichées par TinyMCE. Je n'ai pas accès aux templates club de YOOtheme, je ne peux donc pas tester sur mon éditeur le code source de l'article gallery du demo package de Unity. Pourrais-tu le "zipper" et le joindre à ton prochain post ?

Amicalement,
Rajoz

[grosloulou]

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

c'est le code du début du post avec les "i" qui font les "v" bullets

merci
marc

[Rajoz]

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

Bonjour Marc,

c'est le code du début du post avec les "i" qui font les "v" bullets

J'ai un peu de mal à comprendre parce que dans le post #10, tu parles de code avec des <p> et <img> :

il n'y avait que des <p>,<img>...

S'il s'agit uniquement de :

<ul class="uk-list uk-list-space">
  <li><i class="uk-icon uk-icon-check"></i> Fully responsive including all effects</li>
  <li><i class="uk-icon uk-icon-check"></i> Folder based image selection</li>
  <li><i class="uk-icon uk-icon-check"></i> Supports multiple image folders</li>
  <li><i class="uk-icon uk-icon-check"></i> Automatic thumbnail creation</li>
  <li><i class="uk-icon uk-icon-check"></i> Supports image captions and custom links</li>
  <li><i class="uk-icon uk-icon-check"></i> Uses the Widgetkit Spotlight and Lightbox</li>
  <li><i class="uk-icon uk-icon-check"></i> Built with  HTML5, CSS3, PHP 5.2+ and the latest jQuery version</li>
  <li><i class="uk-icon uk-icon-check"></i> Works with Joomla and WordPress</li>
</ul>

Pour ce code, il ne devrait pas y avoir de problème de saut à la ligne comme je l'ai montré sur l'image TinyMCE du post #9.
Pour vérifier, j'ai même enlevé de ce code les sauts de ligne en mettant tout bout à bout (comme une saisie au kilomètre) et TinyMCE a remis les sauts de ligne automatiquement.

Amicalement,
Rajoz

[grosloulou]

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

voici !
désolé de te prendre autant de temps !
c'est arrivé après avoir ajouté les éléments autorisés i...

<p>The Widgetkit Gallery provides a smart and automated way to publish images on your website. You only need to select the image folders and the whole gallery is generated automatically. Features <i class="uk-icon uk-icon-check"> </i> Fully responsive including all effects <i class="uk-icon uk-icon-check"> </i> Folder based image selection <i class="uk-icon uk-icon-check"> </i> Supports multiple image folders <i class="uk-icon uk-icon-check"> </i> Automatic thumbnail creation <i class="uk-icon uk-icon-check"> </i> Supports image captions and custom links <i class="uk-icon uk-icon-check"> </i> Uses the Widgetkit Spotlight and Lightbox <i class="uk-icon uk-icon-check"> </i> Built with HTML5, CSS3, PHP 5.2+ and the latest jQuery version <i class="uk-icon uk-icon-check"> </i> Works with Joomla and WordPress Showcase Box Example This is an image showcase with eye-catching transition effects and a thumbnail navigation. [widgetkit id=1] Image Wall Example This is an image wall with zoom effect, no margins and squared corners using the lightbox. [widgetkit id=24] Polaroid Example This is an image wall with scattered polaroid pictures using the lightbox. [widgetkit id=25] Slider Example 1 This is an image slider where the image centers automatically during the effect. It also features a spotlight caption and the lightbox. [widgetkit id=27] Slider Example 2 This is an image slider where the image stays left during the effect. [widgetkit id=31] Slideshow Screen Example This is an image gallery using the nice swipe effect from the slideshow widget. [widgetkit id=48] Slideshow Default Example This is an image gallery using all the features from the slideshow widget. [widgetkit id=19] Showcase Example This is a simple image showcase mashing up all the features from the slideshow and slideset widget. [widgetkit id=40] Slideshow Inside Example This is a very basic slideshow which uses preview thumbnails inside the image as a navigation. [widgetkit id=54] Spotlight Example This is an image wall with some margins and rounded corners using the spotlight and lightbox. [widgetkit id=23] Slideset Example This is an image gallery using all the features from the slideset widget. [widgetkit id=44] How To Use The Widgetkit Gallery comes with a user-friendly administration user interface which let's you create new galleries with just a few clicks. The integrated directory browser let's you easily add or remove source directories of your images. All galleries can be loaded anywhere in your theme using shortcodes or the universal Widgetkit Joomla module or WordPress widget.</p>

marc

[Rajoz]

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

Bonsoir Marc,

Pour voir s'il y avait un problème j'ai créé un article en saisissant ton code source auquel j'ai ajouté les balises <p>, <ul>, <li> et <h2> qui me semblaient manquer d'après la démo du template et en laissant tout au kilomètre :

<p>The Widgetkit Gallery provides a smart and automated way to publish images on your website. You only need to select the image folders and the whole gallery is generated automatically.</p><h2>Features<h2><ul class="uk-list uk-list-space"><li><i class="uk-icon uk-icon-check"></i> Fully responsive including all effects</li><li><i class="uk-icon uk-icon-check"> </i> Folder based image selection</li><li><i class="uk-icon uk-icon-check"></i> Supports multiple image folders</li><li><i class="uk-icon uk-icon-check"></i> Automatic thumbnail creation</li><li><i class="uk-icon uk-icon-check"></i> Supports image captions and custom links</li><li><i class="uk-icon uk-icon-check"></i> Uses the Widgetkit Spotlight and Lightbox</li><li><i class="uk-icon uk-icon-check"></i> Built with HTML5, CSS3, PHP 5.2+ and the latest jQuery version</li><li><i class="uk-icon uk-icon-check"> </i> Works with Joomla and WordPress</li></ul><h2>Showcase Box Example</h2><p>This is an image showcase with eye-catching transition effects and a thumbnail navigation.</p><p>[widgetkit id=1]</p><h2>Image Wall Example</h2><p>This is an image wall with zoom effect, no margins and squared corners using the lightbox. [widgetkit id=24] Polaroid Example This is an image wall with scattered polaroid pictures using the lightbox.</p><p>[widgetkit id=25]</p><h2>Slider Example 1<h2><p>This is an image slider where the image centers automatically during the effect. It also features a spotlight caption and the lightbox.</p><p>[widgetkit id=27]</p><h2>Slider Example 2</h2><p>This is an image slider where the image stays left during the effect.</p><p>[widgetkit id=31]</p><h2>Slideshow Screen Example</h2><p>This is an image gallery using the nice swipe effect from the slideshow widget.</p><p>[widgetkit id=48]</p><h2>Slideshow Default Example</h2><p>This is an image gallery using all the features from the slideshow widget.</p><p>[widgetkit id=19]</p><h2>Showcase Example</h2><p>This is a simple image showcase mashing up all the features from the slideshow and slideset widget.</p><p>[widgetkit id=40]</p><h2>Slideshow Inside Example</h2><p>This is a very basic slideshow which uses preview thumbnails inside the image as a navigation.</p><p>[widgetkit id=54]</p><h2>Spotlight Example</h2><p>This is an image wall with some margins and rounded corners using the spotlight and lightbox.</p><p>[widgetkit id=23]</p><h2>Slideset Example</h2><p>This is an image gallery using all the features from the slideset widget.</p><p>[widgetkit id=44]</p><h2>How To Use</h2><p>The Widgetkit Gallery comes with a user-friendly administration user interface which let's you create new galleries with just a few clicks. The integrated directory browser let's you easily add or remove source directories of your images. All galleries can be loaded anywhere in your theme using shortcodes or the universal Widgetkit Joomla module or WordPress widget.</p>

Après sauvegarde puis réouverture de l'article voici le code source que TinyMCE m'a affiché :

<p>The Widgetkit Gallery provides a smart and automated way to publish images on your website. You only need to select the image folders and the whole gallery is generated automatically.</p>
<h2>Features</h2>
<ul class="uk-list uk-list-space">
<li><i class="uk-icon uk-icon-check"> </i> Fully responsive including all effects</li>
<li><i class="uk-icon uk-icon-check"> </i> Folder based image selection</li>
<li><i class="uk-icon uk-icon-check"> </i> Supports multiple image folders</li>
<li><i class="uk-icon uk-icon-check"> </i> Automatic thumbnail creation</li>
<li><i class="uk-icon uk-icon-check"> </i> Supports image captions and custom links</li>
<li><i class="uk-icon uk-icon-check"> </i> Uses the Widgetkit Spotlight and Lightbox</li>
<li><i class="uk-icon uk-icon-check"> </i> Built with HTML5, CSS3, PHP 5.2+ and the latest jQuery version</li>
<li><i class="uk-icon uk-icon-check"> </i> Works with Joomla and WordPress</li>
</ul>
<h2>Showcase Box Example</h2>
<p>This is an image showcase with eye-catching transition effects and a thumbnail navigation.</p>
<p>[widgetkit id=1]</p>
<h2>Image Wall Example</h2>
<p>This is an image wall with zoom effect, no margins and squared corners using the lightbox. [widgetkit id=24] Polaroid Example This is an image wall with scattered polaroid pictures using the lightbox.</p>
<p>[widgetkit id=25]</p>
<h2>Slider Example 1</h2>
<p>This is an image slider where the image centers automatically during the effect. It also features a spotlight caption and the lightbox.</p>
<p>[widgetkit id=27]</p>
<h2>Slider Example 2</h2>
<p>This is an image slider where the image stays left during the effect.</p>
<p>[widgetkit id=31]</p>
<h2>Slideshow Screen Example</h2>
<p>This is an image gallery using the nice swipe effect from the slideshow widget.</p>
<p>[widgetkit id=48]</p>
<h2>Slideshow Default Example</h2>
<p>This is an image gallery using all the features from the slideshow widget.</p>
<p>[widgetkit id=19]</p>
<h2>Showcase Example</h2>
<p>This is a simple image showcase mashing up all the features from the slideshow and slideset widget.</p>
<p>[widgetkit id=40]</p>
<h2>Slideshow Inside Example</h2>
<p>This is a very basic slideshow which uses preview thumbnails inside the image as a navigation.</p>
<p>[widgetkit id=54]</p>
<h2>Spotlight Example</h2>
<p>This is an image wall with some margins and rounded corners using the spotlight and lightbox.</p>
<p>[widgetkit id=23]</p>
<h2>Slideset Example</h2>
<p>This is an image gallery using all the features from the slideset widget.</p>
<p>[widgetkit id=44]</p>
<h2>How To Use</h2>
<p>The Widgetkit Gallery comes with a user-friendly administration user interface which let's you create new galleries with just a few clicks. The integrated directory browser let's you easily add or remove source directories of your images. All galleries can be loaded anywhere in your theme using shortcodes or the universal Widgetkit Joomla module or WordPress widget.</p>

TinyMCE a bien ajouté les sauts de ligne là où il fallait et a conservé les <i>, et voilà ce que cela donne sur le template YOOtheme Master2 (il n'y a pas Widgetkit) :


Essaye avec le code au kilomètre que j'ai saisi pour voir quel résultat tu obtiens.
Si le résultat est identique au mien avec les sauts à la ligne, cela pourrait être parce que que dans le code d'origine, celui que tu as copié/collé, il y avait quelque chose qui aurait pu poser problème à TinyMCE (balise incorrecte, balise ouverte et pas fermée, etc.). Dans ce cas, je ne pourrais essayer de voir où est le problème qu'en examinant le code source d'origine.

Amicalement,
Rajoz