Aller au contenu
Support de Zwii
dangee

Eviter le nettoyage de TinyMCE

Messages recommandés

Si comme moi, vous avez besoin de rajouter des balises "non conventionnelles" (comme itemtype ou itemprop ;)), vous ne pourrez pas avec la configuration de base de TInyMce.

Pour modifier cela, ouvrez le fichier init.js dans le répertoire /core/vendor/tinymce et ajoutez le code suivant après la langue.

//valid
	extended_valid_elements: "*[*]",
	verify_html : false,
	cleanup : false,

et voilà :))

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 roger
      Il arrive parfois (voir même souvent sur certains site spécialisés) que nous ayons besoin de partager du code qui soit visuellement "parlant" pour qui le lira.
      Il arrive aussi que nous ayons envie de partager du code aussi facilement que le partage d'une image ou de texte grâce par exemple à un simple bouton Copier...

       

       

       

       

       
      Prism, un plugin indépendant de l'éditeur de texte TinyMCE permet tout cela, un vrai plus pour un site de vulgarisation ou tutoriels en tout genres qui serait construit avec le cms Zwii.
      La version 1.22.0 proposée ici du plugin Prism est la toute dernière disponible sur le site officiel  ==> https://prismjs.com/
       
      En prime elle vous est livrée avec un panel de 8 thèmes css différents (que vous pourrez adapter à votre site Zwii) et bénéficie sur la partie dite "publique" du code visible en ligne de deux boutons qui permetent pour l'un de connaître le code affiché, tandis que l'autre offrira la possibilité à votre visiteur de pouvoir copier le texte de la boite de code affichée pour ensuite le coller là où bon lui semblera. les boutons on été "francisés" par mes soins ce qui est sympa pour les utilisateurs francophones.
       
      Entièrement compatible avec les versions de ZwiiCMS 10.x.xx et suivantes.
       
      Le zip nommé "Prism.zip" contient un dossier:
      - un dossier nommé "core"
       
      INSTALLATION:
      1° Une fois décompressée l'archive envoyez tout le contenu intérieur du dossier "core" à la racine de votre site
      👉  Un dossiers est à envoyer à la racine de votre zwii:
      -   le dossier nommé "core"
       
      Activer Prism dans le CMS:
      1° Ouvrir la page de configuration de votre site (icône roue crantée tout en haut à droite dans la barre administrative)
      2° Vous rechercherez en bas de la page de configuration les boites de dialogue permettant d'inserrer du script dans le Head et le Body de votre site Zwii (Onglet  nommé "Scripts")
      3° Ouvrir "Script dans head" et ajouter le code ci dessous:
      <link rel="stylesheet" type="text/css" href="<?php echo helper::baseUrl(false); ?>core/vendor/tinymce/plugins/prism/okaidia.css"> NOTA:
      💡 okaidia.css est le thème que j'ai choisi par défaut pour afficher la coloration syntaxique avec ses propres couleurs de code. S'il ne vous plais pas, il suffit de changer ce thème CSS pare l'un des 7 autres fournis et insclus dans le dossier de prism.
      Comme par exemple le thème par défaut vous écrirez alors dans le body ceci:
      <link rel="stylesheet" type="text/css" href="<?php echo helper::baseUrl(false); ?>core/vendor/tinymce/plugins/prism/defaut.css">
       
      4° Ouvrir "Script dans body" et copier ce code là:
      <script src="<?php echo helper::baseUrl(false); ?>core/vendor/tinymce/plugins/prism/prism.js"></script> Ceci activera prism coté "fronted" de votre site et permettra d'afficher vous ligne de codes à vos visiteurs de manière colorée en plus des deux boutons forts pratiques comme expliqué en début de ce sujet;
       
      UTILISATION:
      Voila, vous venez d'activer ce plugin "prism" dans votre site web et ne vous reste plus qu'à proposer vos ligne de codes en utilisant le plugin codesample ,
      codesample doit être préalablement activé dans le Tinymce dans le fichier init.js comme ci dessous
      1° Rendez vous dans le dossier de tinymce" situé dans /core/vendor/tinymce/  et ouvrir le fichier le fichier init.js
      Rechercher ceci :
      // 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", // Contenu de la barre d'outils toolbar: "restoredraft | undo redo | formatselect bold italic underline forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist emoticons | table template | image media link | code fullscreen", 2° Pour activer codesample ,  dans la ligne plugin: "  rechercher codemirror et ajouter codesample ce qui vous donne:
      plugins: "advlist anchor autolink autoresize autosave codemirror codesample colorpicker contextmenu etc....", 3° Pour faire appraître le bouton de codesample dans la barre d'outil Tinymce, il faut à la ligne " toolbar: " ajouter là où vous désirez faire apparaitre son bouton ceci codesample
      exemple le bouton ajouté aprés celui de l'insertion d'un lien (link):
      toolbar: "restoredraft | undo redo | formatselect bold italic underline forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist emoticons | table template | image media link codesample | code fullscreen", Maintenant ne vous reste plus qu'à vérifier que tout fonctionne de cette façon ci:
      -  Appeler codesample pour afficher du code dans vos pages
       

       
      - Choisir le type de code à afficher et le copier dans la boite de dialogue de codesample
       

       
       
      IMPORTANTE INFORMATION:
      Si vous copier du code HTML et que vous décidiez de re-éditer votre page de code, Tinymce effacera automatiquement le contenu HTML des balises de code du même nom.
      Une astuce provisoire (en attendant de trouver une solution viable au problème consiste à remplacer la première balise de code par un symbole # et d'en prévenir vos utilisateurs sur la page d'affichage de celui ci une fois la page publiée)
      Voir ici le sujet traitant de la chose:  http://forum.zwiicms.com/topic/2243-resolucomment-insérer-des-exemples-de-code-dans-tinymce/?do=findComment&comment=24405
       
       
      RESTAURATION:
      Suivez la même procédure que pour l'installation mais cette fois ci inversez les consignes données au dessus en n'oubliant pas de supprimer manuellement le dossier prisme envoyé dans le dossier des plugins de tinymce.
       
      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

    • Par roger
      Voir le fichier Prism la coloration syntaxique (codesample) de code dans tinyMCE
      Il arrive parfois (voir même souvent sur certains site spécialisés) que nous ayons besoin de partager du code qui soit visuellement "parlant" pour qui le lira.
      Il arrive aussi que nous ayons envie de partager du code aussi facilement que le partage d'une image ou de texte grâce par exemple à un simple bouton Copier...

       

       

       

       

       
      Prism, un plugin indépendant de l'éditeur de texte TinyMCE permet tout cela, un vrai plus pour un site de vulgarisation ou tutoriels en tout genres qui serait construit avec le cms Zwii.
      La version 1.22.0 proposée ici du plugin Prism est la toute dernière disponible sur le site officiel  ==> https://prismjs.com/
       
      En prime elle vous est livrée avec un panel de 8 thèmes css différents (que vous pourrez adapter à votre site Zwii) et bénéficie sur la partie dite "publique" du code visible en ligne de deux boutons qui permetent pour l'un de connaître le code affiché, tandis que l'autre offrira la possibilité à votre visiteur de pouvoir copier le texte de la boite de code affichée pour ensuite le coller là où bon lui semblera. les boutons on été "francisés" par mes soins ce qui est sympa pour les utilisateurs francophones.
       
      Entièrement compatible avec les versions de ZwiiCMS 10.x.xx et suivantes.
       
      Le zip nommé "Prism.zip" contient un dossier:
      - un dossier nommé "core"
       
      INSTALLATION:
      1° Une fois décompressée l'archive envoyez tout le contenu intérieur du dossier "core" à la racine de votre site
      👉  Un dossiers est à envoyer à la racine de votre zwii:
      -   le dossier nommé "core"
       
      Activer Prism dans le CMS:
      1° Ouvrir la page de configuration de votre site (icône roue crantée tout en haut à droite dans la barre administrative)
      2° Vous rechercherez en bas de la page de configuration les boites de dialogue permettant d'inserrer du script dans le Head et le Body de votre site Zwii (Onglet  nommé "Scripts")
      3° Ouvrir "Script dans head" et ajouter le code ci dessous:
      <link rel="stylesheet" type="text/css" href="<?php echo helper::baseUrl(false); ?>core/vendor/tinymce/plugins/prism/okaidia.css"> NOTA:
      💡 okaidia.css est le thème que j'ai choisi par défaut pour afficher la coloration syntaxique avec ses propres couleurs de code. S'il ne vous plais pas, il suffit de changer ce thème CSS pare l'un des 7 autres fournis et insclus dans le dossier de prism.
      Comme par exemple le thème par défaut vous écrirez alors dans le body ceci:
      <link rel="stylesheet" type="text/css" href="<?php echo helper::baseUrl(false); ?>core/vendor/tinymce/plugins/prism/defaut.css">
       
      4° Ouvrir "Script dans body" et copier ce code là:
      <script src="<?php echo helper::baseUrl(false); ?>core/vendor/tinymce/plugins/prism/prism.js"></script> Ceci activera prism coté "fronted" de votre site et permettra d'afficher vous ligne de codes à vos visiteurs de manière colorée en plus des deux boutons forts pratiques comme expliqué en début de ce sujet;
       
      UTILISATION:
      Voila, vous venez d'activer ce plugin "prism" dans votre site web et ne vous reste plus qu'à proposer vos ligne de codes en utilisant le plugin codesample ,
      codesample doit être préalablement activé dans le Tinymce dans le fichier init.js comme ci dessous
      1° Rendez vous dans le dossier de tinymce" situé dans /core/vendor/tinymce/  et ouvrir le fichier le fichier init.js
      Rechercher ceci :
      // 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", // Contenu de la barre d'outils toolbar: "restoredraft | undo redo | formatselect bold italic underline forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist emoticons | table template | image media link | code fullscreen", 2° Pour activer codesample ,  dans la ligne plugin: "  rechercher codemirror et ajouter codesample ce qui vous donne:
      plugins: "advlist anchor autolink autoresize autosave codemirror codesample colorpicker contextmenu etc....", 3° Pour faire appraître le bouton de codesample dans la barre d'outil Tinymce, il faut à la ligne " toolbar: " ajouter là où vous désirez faire apparaitre son bouton ceci codesample
      exemple le bouton ajouté aprés celui de l'insertion d'un lien (link):
      toolbar: "restoredraft | undo redo | formatselect bold italic underline forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist emoticons | table template | image media link codesample | code fullscreen", Maintenant ne vous reste plus qu'à vérifier que tout fonctionne de cette façon ci:
      -  Appeler codesample pour afficher du code dans vos pages
       

       
      - Choisir le type de code à afficher et le copier dans la boite de dialogue de codesample
       

       
       
      IMPORTANTE INFORMATION:
      Si vous copier du code HTML et que vous décidiez de re-éditer votre page de code, Tinymce effacera automatiquement le contenu HTML des balises de code du même nom.
      Une astuce provisoire (en attendant de trouver une solution viable au problème consiste à remplacer la première balise de code par un symbole # et d'en prévenir vos utilisateurs sur la page d'affichage de celui ci une fois la page publiée)
      Voir ici le sujet traitant de la chose:  http://forum.zwiicms.com/topic/2243-resolucomment-insérer-des-exemples-de-code-dans-tinymce/?do=findComment&comment=24405
       
       
      RESTAURATION:
      Suivez la même procédure que pour l'installation mais cette fois ci inversez les consignes données au dessus en n'oubliant pas de supprimer manuellement le dossier prisme envoyé dans le dossier des plugins de tinymce.
       
      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 03/12/2020 Catégorie Plugins TinyMCE  
    • Par roger
      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",  
         3° 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

       

       

       

       

       

       

       
       
      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.
×
×
  • Créer...