Aller au contenu
Support de Zwii
roger

Glisser & Déposer (plugin power paste pour tinymce)

Messages recommandés

Glisser & Déposer (plugin power paste pour tinymce)


Je vous propose ici d'installer dans le TinyMCE  ce plugin qui vous permettra de réaliser des glisser/déposer d'image, de texte depuis n'importe quelle source que ce soit (fihier ouvert sur un pc, dans une fenêtre extérieure d'un navigateur web...)


 Entièrement compatible avec toutes les versions de ZwiiCMS actuelles V10.x.xx


* Installation *
   1°  Télécharger l'archive et décompressez la sur votre pc
   2°  Votre archive étant décompressée vous devez avoir alors un dossier nommé "core"
     - un dossier nommé "core"

   3°  Ouvrez votre FTP à l'endroit où vous hébergez votre ZwiiCMS
    Envoyez les dossiers "core" sur votre espace web et acceptez le remplacement de tout les fichiers.

 

* Activation du plugin *
   1° Rendez vous à la racine de votre site et ouvrez le fichier "init.js" situé dans le dossier /core/vendor/tinymce/
   2° recherchez:
 

    // Plugins
    plugins: "advlist anchor autolink autoresize autosave codemirror colorpicker contextmenu fullscreen hr image imagetools link lists media searchreplace stickytoolbar tabfocus table template textcolor emoticons nonbreaking",

   👉  Ajoutez "powerpaste" dans la liste des plugins comme ci dessous

    // Plugins
    plugins: "advlist anchor autolink autoresize autosave codemirror colorpicker contextmenu fullscreen hr image imagetools link lists media powerpaste searchreplace stickytoolbar tabfocus table template textcolor emoticons nonbreaking",

 

   Recherchez dans le même fichier cette ligne:
 

    // Cache la barre de statut
    statusbar: false,

   👉  Ajouter juste en dessous ceci:

    // Active le copié collé à partir du Web
    paste_data_images: true,
    // Active le copié collé à partir du presse papier
    paste_filter_drop: false,

Enregistrez votre modification, c'est tout.

 

En images voici l'utilisation du plugin powerpaste en action dans le TinyMCE mode éditeur complet

1a.thumb.png.6bb39279d9f43f1d2b1df02b0e2a5877.png

 

2a.thumb.png.f108623cd2a902bb80e0179e2bd7ab09.png

 

3a.thumb.png.e1ed4d5d5befe38dc06950d43798ffbd.png

 

4a.thumb.png.d671bdb5c97831caa25c7d8ff72963d7.png

 

5a.png.a4a8cfd472e2f1602448a62513aa9ee6.png

 

6a.png.e9aa549ff5741fc2747a52374fc9df35.png

 

7a.thumb.png.be928dd8b7af969e8225bfdf2a241b58.png

 

 

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 plugin pour Tinymce, 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 thème 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.


 

Partager ce message


Lien à poster
Partager sur d’autres sites
Le 16/11/2020 à 15:11, roger a dit :

Glisser & Déposer (plugin power paste pour tinymce)

 

Ce titre est trompeur, ton plugin n'est pas celui annoncé : "plugin power paste pour tinymce", car, si on ajoute "paste" dans la liste des plugins :

 

Le 16/11/2020 à 15:11, roger a dit :

👉  Ajoutez "paste" dans la liste des plugins comme ci dessous


    // Plugins
    plugins: "advlist anchor autolink autoresize autosave codemirror colorpicker contextmenu fullscreen hr image imagetools link lists media paste searchreplace stickytoolbar tabfocus table template textcolor emoticons nonbreaking",

 

 

alors il s'agit du plugin paste :
https://www.tiny.cloud/docs-4x/plugins/paste/
non pas du plugin power paste, qui offre plus de possibilité de formatage mais qui est payant :
https://www.tiny.cloud/docs-4x/plugins/powerpaste/

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a 59 minutes, Gilux a dit :

Ce titre est trompeur, ton plugin n'est pas celui annoncé : "plugin power paste pour tinymce", car, si on ajoute "paste" dans la liste des plugins :

Comme quoi il est important de revérifier ses écrits, je viens juste à l'instant de rectifier dans le tutoriel d'installation l'erreur de ma part "mette

powerpaste

en lieu et place de paste 😳

il y a une heure, Gilux a dit :

alors il s'agit du plugin paste :
https://www.tiny.cloud/docs-4x/plugins/paste/
non pas du plugin power paste, qui offre plus de possibilité de formatage mais qui est payant :

Là aussi je trouve dommage d'affirmer une telle chose car si tu avais téléchargé le plugin tu aurais bien constaté  que c'est bien le plugin payant qui est joint dans mon archive....Va d'ailleurs falloir le dire à @herve cette erreur de copie de texte de ma part car c'est le seul à l'avoir téléchargé.

Il suffit d'ailleurs d'ouvrir le dossier du plugin pour se rendre compte qu'il contient bien plus que l'intérieur de l'autre plug auquel tu fais référence..

 

une capture d'écran du plugin dans le tinymce..

PP.png.45b5437b37203558ab272bdbce0a6d2e.png  PP1.png.a02175319835997dc66f069c7c0ed0c2.png

 

Merci tout de même Gilux d'avoir repérer cette "coquille " dans mon explication pour l'installer, cela m'a permis de la corriger illico.

 

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 4 heures, roger a dit :

Là aussi je trouve dommage d'affirmer une telle chose car si tu avais téléchargé le plugin tu aurais bien constaté  que c'est bien le plugin payant qui est joint dans mon archive

 

Pourquoi Là aussi ? Je m'appretais justement à le faire, mais en lisant tes conseils et vu que tu indiquais d'ajouter 'paste' je m'en suis abstenu, mais puisque maintenant tu indiques :

Le 16/11/2020 à 15:11, roger a dit :

 👉  Ajoutez "powerpaste" dans la liste des plugins comme ci dessous

Je vais le télécharger de suite 😉

 

Partager ce message


Lien à poster
Partager sur d’autres sites
Le 16/11/2020 à 15:11, roger a dit :

 👉  Ajouter juste en dessous ceci:


    // Active le copié collé à partir du Web
    paste_data_images: true,
    // Active le copié collé à partir du presse papier
    paste_filter_drop: false,

 

Ces lignes existent déjà dans le init.js :

	// Cache la barre de statut
	statusbar: false,
	// Active le copié collé à partir du Web
	paste_data_images: true,
	// Active le copié collé à partir du presse papier
	paste_filter_drop: false,

Par contre, celles-ci non... 😀

	// Active le copié collé à partir du Web
	powerpaste_data_images: true,
	// Active le copié collé à partir du presse papier
	powerpaste_filter_drop: false,

Au lieu d'ajouter "powerpaste", j'ai remplacé "paste" par "powerpaste", car ça paraît inutile d'avoir les 2, non ?

 

 

Modifié par Gilux
+

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour Gilux.

Je vais tacher de faire court dans les explications afin d'expliquer ce qu'est powerpaste (en rapport avec paste le plugin initial gratuit depuis lequel il a été développé et amélioré, devenant ainsi payant ce qui me semble normal)

Powerpaste de base fait exactement la même chose que paste, mais en plus il permet le glisser/déposer, l'inclusion direct d'autre forme de doc que ceux copié depuis Word....en ajoutant à tout ceci que powerpaste permet en plus de modifier directement depuis l'éditeur la mise en page de la copie et qu'il fonctionne sur tout les navigateurs (y compris Firefox grand adepte de la boite d'alerte "Votre navigateur ne permet pas la copie....utilisez le raccourcis clavier etc..)

 

Si tu n'as pas peur du chinois, un lien qui devrais te plaire je pense (c'est de là que je suis partis puis ai traduit "les modes d'emploi" joint dans le fichier à télécharger) 😉

 

https://github.com/fangcw/tinymce_powerpaste

 

Concernant les lignes présentent ou non dans le init.js

 

Il y a 8 heures, Gilux a dit :

Ces lignes existent déjà dans le init.js :

 

Il y a 8 heures, Gilux a dit :

Ces lignes existent déjà dans le init.js :

 

Il y a 8 heures, Gilux a dit :

Au lieu d'ajouter "powerpaste", j'ai remplacé "paste" par "powerpaste", car ça paraît inutile d'avoir les 2, non ?

 C'est égal car comme expliqué plus haut il fera le même travail de base que son "original limité" mettre powerpaste en ligne complémentaire n'est utile que pour permettre le copier/coler (ou glisser/déposer) que pour certains type de documents non pris en charge par le plugin "paste" original.

 

On peut donc faire selon ta façon, cela ne pose aucun problèmes.

Un autre exemple de modif qui aurait pu être donné dans le tuto, l'import de fichiers locaux grâce à powerpaste:

  powerpaste_allow_local_images: true,
  powerpaste_word_import: 'prompt',
  powerpaste_html_import: 'prompt',

 Ici tu as une vidéo complète (en anglais qui montre bien la différence entre les deux plugins (tout les avantage du plugin payant y sont relatés)

 

Ce serait sympa si tu produisais ta propre version et la mettais en ligne, dans ce cas je retirerais celle que je propose actuellement si besoin était. Et si ce plugin powerpaste semble inutile car "paste" ferait le job tout aussi bien, on peut aussi tout simplement le retirer des plugins pour le tinymce 🤓

Tu en penses quoi toi?

 

 

  • Confus 1

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 13 heures, roger a dit :

Je vais tacher de faire court dans les explications afin d'expliquer ce qu'est powerpaste

 

Il y a 13 heures, roger a dit :

Tu en penses quoi toi?

 

Pas grand chose...

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour

 

J'ai téléchargé cet addons et vous ferais un retour d'utilisation dès que je l'aurai testé.

 

Je suis toujours à bricoler les galeries gps.

 

Hervé

  • Merci 1

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.5 testée  avec Zwii 10.4.04
       
      Attention les versions < 3.4  de ce module ne sont pas compatibles avec Zwii 10.4.03 et supérieur, la mise à jour est obligatoire.
       
       
      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 module incluant le dossier slider.
       
      2 - Nouvelle installation ou mise à jour
      Avec votre logiciel FTP transférer le dossier module à la racine de votre site.
       

       
       
      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.
       

       
      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.5 testée  avec Zwii 10.4.04
       
      Attention les versions < 3.4  de ce module ne sont pas compatibles avec Zwii 10.4.03 et supérieur, la mise à jour est obligatoire.
       
       
      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 module incluant le dossier slider.
       
      2 - Nouvelle installation ou mise à jour
      Avec votre logiciel FTP transférer le dossier module à la racine de votre site.
       

       
       
      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.
       

       
      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 mickaelgutt
      Bonjour tout le mode !!
       
      Je suis occupé de coder pour améliorer le module livredor,
      lorsque l'on mets celui-ci à disposition il est au format zip ou rar dans la section téléchargement.
      Je voulais savoir si @Fred ou @sylvainlelievre ( développeurs de zwii ) avez l'intention lors de la création d'une nouvelle page, d'ajouter à coté de la liste des modules un bouton afin d'importer le zip et de le décompresser directement dans le répertoire ou se trouve la liste des modules ( ça évite le ftp ) en passant par le gestionnaire de fichier.
       
      Je pense que pour un débutant ça facilitera l'installation d'un module sans utilisation d'un ftp.
       
      je sais qu'il faut mettre un bouton dans core/module/page/view/edit/edit.php ( ou sinon on peut l'intégrer dans la barre noir en haut !! )
      et la fonction qui permet de décompresser le fichier zip à mettre dans core/module/page/page.php afin de le mettre dans le répertoire module/"nom_du_module_à dézipper"
      et il sera visible dans la liste des modules 

       
      Mais pour ça, il faut l'intégrer des codes qui ne s'effaceront pas lors d'une mise à jour ou mise en place d'une nouvelle installation.
       
      donc ma question est : 
      1 - avez vous prévu cette option ?
      2 - Si oui, sera t'elle intégrée dans la version 11 de zwii ?.
      3 - Est ce que j'ai votre autorisation pour l'intégrer chez moi sur la V_10.4 afin de vous en faire des retours ou c'est déjà prévu ?
       
      Merci et bon week-end
      Cordialement
      Mickael
×
×
  • Créer...