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

Réduire
Ce sujet est fermé.
X
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

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

    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

  • #2
    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) :
    Code:
    +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;
    Code:
    [COLOR=#3E3E3E]<a href="#" class="uk-icon-button uk-icon-github">&nbsp;</a>[/COLOR]

    Amicalement,
    RAjoz

    Commentaire


    • #3
      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

      Commentaire


      • #4
        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".
        Pour apprendre à construire votre site web avec Joomla 3 : Joomla3! Le Livre Pour Tous : http://cinnk.com/joomla/3/le-livre-pour-tous

        Référencement Joomla! 10 astuces pour référencer son site web https://cinnk.com/articles/referencement-joomla-10-astuces-pour-referencer-son-site-web

        Créez votre boutique en ligne avec Joomla! & HikaShop http://cinnk.com/boutique/livres/cre...la-et-hikashop

        Commentaire


        • #5
          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) :
          Code:
          #i[class|style],#a[*]
          Amicalement,
          Rajoz

          Commentaire


          • #6
            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

            Commentaire


            • #7
              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

              Commentaire


              • #8
                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 !?

                Commentaire


                • #9
                  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
                  Cliquez sur l'image pour l'afficher en taille normale

Nom : editeur-tinymce.png 
Affichages : 1 
Taille : 12,1 Ko 
ID : 1803713
                  avec CodeMirror : les sauts de ligne sont préservés
                  Cliquez sur l'image pour l'afficher en taille normale

Nom : editeur-codemirror.jpg 
Affichages : 1 
Taille : 18,9 Ko 
ID : 1803714
                  et voici le résultat en affichant dans YOOtheme Master2 (le gratuit le plus proche de Unity) :
                  Cliquez sur l'image pour l'afficher en taille normale

Nom : editeur-resultat.png 
Affichages : 1 
Taille : 4,6 Ko 
ID : 1803715

                  Amicalement,
                  Rajoz

                  Commentaire


                  • #10
                    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

                    Commentaire


                    • #11
                      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

                      Commentaire


                      • #12
                        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

                        Commentaire


                        • #13
                          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 :
                          Code:
                          <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

                          Commentaire


                          • #14
                            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

                            Commentaire


                            • #15
                              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) :
                              Cliquez sur l'image pour l'afficher en taille normale

Nom : gallery.jpg 
Affichages : 1 
Taille : 72,3 Ko 
ID : 1803721

                              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
                              Dernière édition par Rajoz à 30/09/2014, 00h29

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X