Aller au contenu
Support de Zwii

Rechercher dans la communauté

Affichage des résultats pour les étiquettes 'syntaxique'.



Plus d’options de recherche

  • Rechercher par étiquettes

    Saisir les étiquettes en les séparant par une virgule.
  • Rechercher par auteur

Type du contenu


Forums

  • Support de Zwii
    • Informations et nouveautés
    • Ateliers de développement
    • Un bug découvert ?
    • Questions sur l'installation et l'utilisation
    • Trucs et astuces
    • Support des téléchargements
  • Communauté
    • Boîte à idées
    • Votre site

Catégories

  • Les thèmes
    • Thèmes du site
    • Thèmes de l'administration
  • Les modules
    • Modules officiels
    • Galeries
  • Plugins TinyMCE
  • Tutoriels
  • Modifications et astuces

Rechercher les résultats dans…

Rechercher les résultats qui contiennent…


Date de création

  • Début

    Fin


Dernière mise à jour

  • Début

    Fin


Filtrer par nombre de…

Inscription

  • Début

    Fin


Groupe


À propos de moi


Site internet

2 résultats trouvés

  1. 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  
  2. Version 1.22.0

    7 téléchargements

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