Aller au contenu
Support de Zwii

Messages recommandés

Le Spoiler un plugin pour TinyMCE


Plugin Spoiler pour TinyMCE

Je vous propose ici d'installer dans le TinyMCE  un plugin qui vous fera gagner beaucoup de place lors de l'affichage d'une page, d'un template, d'un article pouvant comporter des dizaines de lignes sur toute la hauteur de leurs rédaction...

Ce plugin a pour nom SPOILER

100% compatible avec les versions 10.x.xx actuelles et a venir

Il arrive parfois que nous devions développer pour un sujet donné de nombreuse lignes écrites pour expliquer une chose bien précise, ce peut aussi être dans une seule page une flopées d'images entre deux lignes écrites pour illustrer le propos.

Bon sang quelle place occupée ensuite dans la hauteur d'une simple page alors que certaine parties de celle ci pourraient être masquées et n'être affichées qu'à la demande du lecteur de votre page.

C'est là qu'intervient un module incorporable dans le TinyMCE le module SPOILER utilisé sur énormément de site à l'heure actuelle.

 

Voici un simple texte qui nous servira d'exemple. Nous avons décidé de le recopier une bonne dizaine de fois....imaginez alors la hauteur qu'il occupera ensuite, sans l'aide du module que je vous propose, sur la page où il doit être affiché.

 

1.png.61f74673962aa0fb790be804f3d0a6f7.png

 

Il ressemblera à cela une fois le script "spoiler" installé chez vous, grande différence non?:

 

2.png.6efeeeaf6b2d08d72c4951ab8f97a88b.png

 

3.thumb.png.306119b11572e4ec9dc0ba5a79a0dc59.png

 

4.thumb.png.1870225aee59e82d8d5346467c274e8b.png

 

Voici ce que vous pourriez faire par la suite dans l'utilisation de ce "petit plus" avec votre éditeur des texte incorporé dans le cms.

 En mode source vous pouvez changer le titre de votre spoiler par le votre

 

5.thumb.png.f6cfc5941acfa7cc92435120f734ea29.png

 

6.png.e2d5f1057957b55a294e392c5ac4be43.png

  

👉 Ce que fait le script:

Il ira écrire les lignes de code voulue dans le fichier /core/vendor/tinymce/init.js et rien de plus. Puis en mêm temps téléversera le dossier "spoiler" dans le dossier des plugins du TinyMCE.

IMPORTANT

Le zip  contient deux versions du module:

- un dossier nommé 

- un dossier nommé

Installation:

script nommé "Spoiler V10.zip" qui contient les deux versions

Une fois l'archive du script dézippé sur votre pc, choisissez la version qui vous convient, ouvrez son dossier et vous aurez alors deux autres dossiers;

 

Dossier spoiler version simple (réservé à ceux qui n'ont aucun script déclarés dans le body de leur site)

- un dossier nommé: installer

- un dossier nommer: restaurer

 

Dossier "spoiler version avec des scripts dans le body" *** (ceux qui ont déjà du script dans leur body doivent impérativement installer cette version)

- un dossier nommé: installer

- un dossier nommer: restaurer

 

ouvrez le dossier installer et envoyer tout son contenu situé dedans à la racine de votre zwiicms (là ou il est installé sur votre serveur)

Acceptez le remplacement du fichier "index.php" et puis c'est tout, le script sera fonctionnel des que vous vous rendrez sur votre site ou simplement en rafraichissant votre page si vous y êtes déjà connecté.

*** 3° UNIQUEMENT POUR LES UTILISATEURS DE LA SECONDE VERSION ("spoiler version avec des scripts dans le body" )

==> Ouvrir la configuration de votre site et ajouter dans l'onglet des scripts ceci dans  "Script dans Body"

<script>
// spoiler
$(function(){
$('.spoiler-text').hide();
$('.spoiler-toggle').click(function(){
$(this).next().toggle();
}); // end spoiler-toggle
}); // end document ready
</script>

 

Restauration:

Il vous suffit de suivre la même procédure que ci dessus sauf que cette fois ce sera le contenu à l'intérieur du dossier nommé restaurer qu'il faudra envoyer dans votre zwiicms.

NOTA POUR LES DEUX VERSIONS:

Il vous faudra lors de la désinstallation du script vous rendre dans la configuration de votre site, ouvrir l'onglet  tout en bas de la page qui ajoute du script dans le body et y supprimer ceci :

<script>
// spoiler
$(function(){
$('.spoiler-text').hide();
$('.spoiler-toggle').click(function(){
$(this).next().toggle();
}); // end spoiler-toggle
}); // end document ready
</script>

 

🤓 👉 N 'hésitez pas à venir mettre un petit commentaire ici, ça encourage celui qui œuvre mis peut aussi lui apporter l'envie de faire mieux si sont astuce semblait pouvoir être améliorée.😋

Enjoy les amis.


 

Partager ce message


Lien à poster
Partager sur d’autres sites

Salut @augras

Je ne pense pas que tu puisses trouver quelque chose de similaire Philippe dans le zwii depuis longtemps car c'est une fonction ce "module spoiler" que j'avais par le passé adapté pour les zwii en v8 puis v9 et v10.

Le spoiler permettant de masquer un texte sous la forme d''un dépliant et ne peut être comparer à ce que tu pense sêtre le "gabarit accordion" qui lui affiche un bloc et masque d''autres blocs, si l'on clique sur l'autre bloc il masque le précédent affiché) fort ressemblant en effet mais pas pour le même usage.

Les usages du spoiler peuvent être ceux ci:

On peut par exemple combiner plus plusieurs spoilers dans une page, voir même des spoiler imbriqués les uns dans les autres.

En tout cas je te remercie pour ton retour d'expérience si tu essaies ce module.

Roger

 

Partager ce message


Lien à poster
Partager sur d’autres sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.


  • Contenu similaire

    • Par sylvainlelievre
      Voir le fichier Diaporama Slider
       
      Ce module va vous permettre d'insérer un diaporama responsif dans une page Zwii.
       
      Voir ce module en situation
       
      Version 3.2 testée avec Zwii 9.2.28 et jusqu'à Zwii 10.3.09
       
       
      Par configuration vous pourrez obtenir cet aspect :

      La navigation se fait en cliquant sur la zone droite ou gauche de l'image.
      Le texte apparaît de façon progressive au survol de l'image.
      Arrêt du défilement automatique au survol de l'image.
       
       
      Celui là :

      Navigation par boutons discrets.
      Le texte et les boutons apparaissent de façon progressive au survol de l'image.
      Arrêt du défilement automatique au survol de l'image.
       
      Ou encore cette version avec légende en haut et boutons de navigation rectangulaires :

       
      Une version sans les puces de navigations :

      Le module Slider peut être utilisé dans une page avec gabarit
       

       
       
      Le diaporama est basé sur responsiveslides.com, le module Zwii slider est basé sur le module Zwii gallery de @Rémi. Merci à @Gilux et à @roger pour leurs contributions dans le CSS et à @Fred pour ses conseils et la mise à jour du fichier edit.js.php.
       
      #Installation
       
      1- Dézipper l'archive slider_vxx.zip
      Elle contient le dossier slider et 1 autre fichier dont nous verrons l'utilité plus loin (edit.js.php).
       
      Si vous avez déjà fait l'installation d'une ancienne version du module slider, il est préférable de la supprimer avant de poursuivre. Si la version précédemment installée était >= 2.3 vous pourrez réutiliser votre diaporama après avoir procédé à nouveau à son paramétrage, pour une version plus ancienne il faudra le recréer.
       
      2 - Avec votre logiciel FTP transférer le dossier slider dans le dossier module de votre site (attention module, pas core/module)
       

       
       
      Résultat obtenu pour le site dev9test
       
      slider/vendor/js/ contient le fichier javascript nécessaire au fonctionnement du module.
       
      slider/view/index/ contient 4 fichiers : index.php responsable de l'affichage du diaporama, index.css qui regroupe tous le CSS du diaporama et themes.gif,  themes.svg pour les 2 boutons proposés.
       
      slider/view/config/ et slider/view/edit/ proviennent du module gallery et sont utilisés pour le paramétrage du diaporama. Ils sont légèrement modifiés.
       
       
      #mode d'emploi
       
      1 - Créer une nouvelle page, modifier cette page

       
      2 - Sélectionner le module Slider et choisir la position du module dans la page
       
      A partir de la version 9.2.07 de Zwii l'option "Position du module dans la page" apparaît. Elle vous permet de choisir où le diaporama va s'afficher dans la page.
      La position "libre" vous permet d'insérer du contenu avant et après le diaporama en saisissant [MODULE] à l'endroit voulu dans votre page.
       

       
      Avec des versions 9 de Zwii plus anciennes vous pouvez remplacer par FTP le fichier core/module/page/view/edit/edit.js.php par celui contenu dans l'archive et dont on a parlé plus haut. Si non votre diaporama s'affichera uniquement en bas de page.
       
      Cliquez sur l'icone "roue dentée", positionnée à côté du choix de module, pour passer à l'étape 3.
       
      3 - Choisir le dossier contenant les images
       
      Vous aurez au préalable chargé les images du diaporama dans un dossier à l'intérieur de site/file/source/ (par FTP ou par le gestionnaire de fichiers intégré à Zwii).
      A ce propos 3 remarques :
      * Le diaporama va s'adapter automatiquement au format (16/9, 4/3,...) ou à l'orientation des images mais je trouve que le meilleur résultat visuel sera obtenu avec des images de même format et de même orientation. Mais ce n'est qu'une opinion personnelle, vous êtes libre de mixer différentes images.
      * Le diaporama va afficher l'image dans le même conteneur quelque soit sa taille, une image trop petite va être dilatée, une image trop grande va augmenter le temps de chargement du diaporama. Je vous conseille des images de largeur minimum 800px si votre paramétrage de la " Largeur maxi du diaporama " est à 800px.
      * L'ordre de passage est maintenant paramétrable.
       

       
       
      Saisissez un nom, sélectionnez un dossier cible puis cliquez sur l’icône dossier. Vous devez obtenir ceci :
       

       
       
      Pour passer à l'étape suivante cliquez sur l'icône "crayon" située sous "Paramétrage du diaporama".
       
      4 - Paramétrage du diaporama.
       

       
       
      Sur cette page de paramétrage, après un rappel du nom et du dossier cible des images, vous avez accès aux réglages suivants :
      Choix du type de navigation manuelle par boutons ou par zones droite ou gauche de l'image, Choix du type de boutons, flèche dans un rectangle noir ou dans un cercle blanc. Visibilité des puces de navigation ou pager, Largeur maxi du diaporama en pixels, le réglage "100%" correspond à la largeur du site définie en configuration - 40 pixels, La durée de la transition, en secondes ou en millisecondes, entre diapositives (fading) , La durée totale d'affichage, en secondes ou en millisecondes, d'une image (fading compris, au minimum durée de la transition + 100ms), La visibilité de la légende uniquement au survol de l'image, toujours visible ou jamais visible, La position de la légende en bas ou en haut de l'image, Le temps d'apparition de la légende et des boutons, Le choix du type de tri des images, La saisie des légendes.  
      N'oubliez pas d'enregistrer.
       
      # C'est possible
       
      Dans un même site Zwii vous pouvez insérer plusieurs diaporamas avec pour chacun des paramétrages différents.
       
      # C'est pas possible
       
      Dans une page Zwii vous ne pouvez insérer qu'un seul diaporama.
       
      Avec Zwii ce n'est pas possible d'insérer plus d'un module par page, vous ne pourrez donc pas insérer un diaporama (module slider) dans une page de blog (module blog) ou dans un formulaire (module form).
       
       
       
      Contributeur sylvainlelievre Soumis 25/09/2019 Catégorie Galeries  
    • Par sylvainlelievre
      Ce module va vous permettre d'insérer un diaporama responsif dans une page Zwii.
       
      Voir ce module en situation
       
      Version 3.2 testée avec Zwii 9.2.28 et jusqu'à Zwii 10.3.09
       
       
      Par configuration vous pourrez obtenir cet aspect :

      La navigation se fait en cliquant sur la zone droite ou gauche de l'image.
      Le texte apparaît de façon progressive au survol de l'image.
      Arrêt du défilement automatique au survol de l'image.
       
       
      Celui là :

      Navigation par boutons discrets.
      Le texte et les boutons apparaissent de façon progressive au survol de l'image.
      Arrêt du défilement automatique au survol de l'image.
       
      Ou encore cette version avec légende en haut et boutons de navigation rectangulaires :

       
      Une version sans les puces de navigations :

      Le module Slider peut être utilisé dans une page avec gabarit
       

       
       
      Le diaporama est basé sur responsiveslides.com, le module Zwii slider est basé sur le module Zwii gallery de @Rémi. Merci à @Gilux et à @roger pour leurs contributions dans le CSS et à @Fred pour ses conseils et la mise à jour du fichier edit.js.php.
       
      #Installation
       
      1- Dézipper l'archive slider_vxx.zip
      Elle contient le dossier slider et 1 autre fichier dont nous verrons l'utilité plus loin (edit.js.php).
       
      Si vous avez déjà fait l'installation d'une ancienne version du module slider, il est préférable de la supprimer avant de poursuivre. Si la version précédemment installée était >= 2.3 vous pourrez réutiliser votre diaporama après avoir procédé à nouveau à son paramétrage, pour une version plus ancienne il faudra le recréer.
       
      2 - Avec votre logiciel FTP transférer le dossier slider dans le dossier module de votre site (attention module, pas core/module)
       

       
       
      Résultat obtenu pour le site dev9test
       
      slider/vendor/js/ contient le fichier javascript nécessaire au fonctionnement du module.
       
      slider/view/index/ contient 4 fichiers : index.php responsable de l'affichage du diaporama, index.css qui regroupe tous le CSS du diaporama et themes.gif,  themes.svg pour les 2 boutons proposés.
       
      slider/view/config/ et slider/view/edit/ proviennent du module gallery et sont utilisés pour le paramétrage du diaporama. Ils sont légèrement modifiés.
       
       
      #mode d'emploi
       
      1 - Créer une nouvelle page, modifier cette page

       
      2 - Sélectionner le module Slider et choisir la position du module dans la page
       
      A partir de la version 9.2.07 de Zwii l'option "Position du module dans la page" apparaît. Elle vous permet de choisir où le diaporama va s'afficher dans la page.
      La position "libre" vous permet d'insérer du contenu avant et après le diaporama en saisissant [MODULE] à l'endroit voulu dans votre page.
       

       
      Avec des versions 9 de Zwii plus anciennes vous pouvez remplacer par FTP le fichier core/module/page/view/edit/edit.js.php par celui contenu dans l'archive et dont on a parlé plus haut. Si non votre diaporama s'affichera uniquement en bas de page.
       
      Cliquez sur l'icone "roue dentée", positionnée à côté du choix de module, pour passer à l'étape 3.
       
      3 - Choisir le dossier contenant les images
       
      Vous aurez au préalable chargé les images du diaporama dans un dossier à l'intérieur de site/file/source/ (par FTP ou par le gestionnaire de fichiers intégré à Zwii).
      A ce propos 3 remarques :
      * Le diaporama va s'adapter automatiquement au format (16/9, 4/3,...) ou à l'orientation des images mais je trouve que le meilleur résultat visuel sera obtenu avec des images de même format et de même orientation. Mais ce n'est qu'une opinion personnelle, vous êtes libre de mixer différentes images.
      * Le diaporama va afficher l'image dans le même conteneur quelque soit sa taille, une image trop petite va être dilatée, une image trop grande va augmenter le temps de chargement du diaporama. Je vous conseille des images de largeur minimum 800px si votre paramétrage de la " Largeur maxi du diaporama " est à 800px.
      * L'ordre de passage est maintenant paramétrable.
       

       
       
      Saisissez un nom, sélectionnez un dossier cible puis cliquez sur l’icône dossier. Vous devez obtenir ceci :
       

       
       
      Pour passer à l'étape suivante cliquez sur l'icône "crayon" située sous "Paramétrage du diaporama".
       
      4 - Paramétrage du diaporama.
       

       
       
      Sur cette page de paramétrage, après un rappel du nom et du dossier cible des images, vous avez accès aux réglages suivants :
      Choix du type de navigation manuelle par boutons ou par zones droite ou gauche de l'image, Choix du type de boutons, flèche dans un rectangle noir ou dans un cercle blanc. Visibilité des puces de navigation ou pager, Largeur maxi du diaporama en pixels, le réglage "100%" correspond à la largeur du site définie en configuration - 40 pixels, La durée de la transition, en secondes ou en millisecondes, entre diapositives (fading) , La durée totale d'affichage, en secondes ou en millisecondes, d'une image (fading compris, au minimum durée de la transition + 100ms), La visibilité de la légende uniquement au survol de l'image, toujours visible ou jamais visible, La position de la légende en bas ou en haut de l'image, Le temps d'apparition de la légende et des boutons, Le choix du type de tri des images, La saisie des légendes.  
      N'oubliez pas d'enregistrer.
       
      # C'est possible
       
      Dans un même site Zwii vous pouvez insérer plusieurs diaporamas avec pour chacun des paramétrages différents.
       
      # C'est pas possible
       
      Dans une page Zwii vous ne pouvez insérer qu'un seul diaporama.
       
      Avec Zwii ce n'est pas possible d'insérer plus d'un module par page, vous ne pourrez donc pas insérer un diaporama (module slider) dans une page de blog (module blog) ou dans un formulaire (module form).
       
       
       
    • Par roger
      Traduire le Site Zwii (en 64 langues)
      Voir le fichier Vous aimeriez offrir à vos visiteurs la possibilité de parcourir votre ZwiiCMS dans leur langue maternelle.
      Vous avez des collaborateurs sur votre site qui n'utilisent pas le français ou le maîtrisent mal
      Vous êtes au bon endroit pour offrir ce bonheur à vos utilisateurs.
       

       
      Entièrement compatible avec les versions de ZwiiCMS 10.x.xx et suivantes.
      Ce module de traduction se plaçant dans votre menu de site est basé sur l'api de Google traduction adaptée pour graphiquement "coller" au style de votre site.
       
      Le zip nommé "Traduire site.zip" contient deux dossiers:
      - un dossier nommé "installer"
      - un fichier nommé "installation.txt"
       
      INSTALLATION:
      1° Une fois décompressée l'archive envoyez tout le contenu intérieur du dossier "installer" à la racine de votre site
      👉  Deux dossiers sont à envoyer à la racine de votre zwii:
      -   un dossier nommé "core"
      -   un dossier nommé "site""
       
      1°  Dans main.php rechercher ceci:
       
      <div id="toggle">  
      2° Sélectionner <div id="toggle"> et le remplacer par le code proposé ci dessous
      IMPORTANT==> Le code est à copier à 4 endroits où ce trouve <div id="toggle">
       
      <span style="float:right;padding:15px;" id="bouton_texte" onclick="javascript:afficher_cacher('trad');" data-tippy-content="Traduire le site" tabindex="0"><img src="./site/file/source/icones/langue.png" style="width: 24px;" loading="lazy"></span> <div id="trad"><div id="google_translate_element" style="float: right;"></div></div> <div id="toggle">  
      3°  Dans le body (script) ajouter
       

       

       
      <script type="text/javascript"> afficher_cacher('trad'); function afficher_cacher(id) { if(document.getElementById(id).style.visibility=="hidden") { document.getElementById(id).style.visibility="visible"; document.getElementById('bouton_'+id).innerHTML='Cacher la barre'; } else { document.getElementById(id).style.visibility="hidden"; document.getElementById('bouton_'+id).innerHTML='Afficher la barre'; } return true; } </script>  
      RESTAURATION:
      Suivez la même procédure que pour l'installation mais cette fois ci inversez les consignes:

       
      1° Rechercher :
      <span style="float:right;padding:15px;" id="bouton_texte" onclick="javascript:afficher_cacher('trad');" data-tippy-content="Traduire le site" tabindex="0"><img src="./site/file/source/icones/langue.png" style="width: 24px;" loading="lazy"></span> <div id="trad"><div id="google_translate_element" style="float: right;"></div></div> <div id="toggle"> 2° Le remplacer par:
          
      <div id="toggle">  
      3° rendez vous dans les scripts de votre body et supprimez y le script suivant
      <script type="text/javascript"> afficher_cacher('trad'); function afficher_cacher(id) { if(document.getElementById(id).style.visibility=="hidden") { document.getElementById(id).style.visibility="visible"; document.getElementById('bouton_'+id).innerHTML='Cacher la barre'; } else { document.getElementById(id).style.visibility="hidden"; document.getElementById('bouton_'+id).innerHTML='Afficher la barre'; } return true; } </script>  
      Enjoy les amis.
       
      *** N'oubliez pas aussi de revenir sur cette page laisser un petit commentaire si vous avez apprécié le travail réalisé pour ce module, c'est encourageant, gratifiant aussi pour celui qui l'a mis à disposition pour votre plus grand plaisir..
       
      # IMPORTANT A LIRE #
      Vous reconnaissez qu'en utilisant ce script sur votre site être entièrement responsable en cas de problème quel qu'il soit après sa mise en œuvre, je ne pourrais donc être considéré en aucun cas comme responsable de cet état de fait.
      💡 Pensez alors à faire une sauvegarde intégrale de votre site, ceci vous permettrait alors de revenir en arrière en réinjectant celle ci et retrouver votre site web tel que vous l'aviez conçu avant utilisation du script ci dessus
      Contributeur roger Soumis 11/11/2020 Catégorie Modifications et astuces  
×
×
  • Créer...