Aller au contenu
Support de Zwii
roger

Prism la coloration syntaxique (codesample) de code dans tinyMCE

Messages recommandés

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...

pr5.thumb.png.09101356ff09d9fe67aef4365f5de22a.png

 

pr2.png.3e8a859d98b1538e1851dc2b991a0462.png

 

pr2.png.3e8a859d98b1538e1851dc2b991a0462.png

 

pr1.thumb.png.e2c93d81322d8a34696591b0ffb81c3c.png

 

pr0.thumb.png.6e9eefd1f19f0c09807a94e5cd28cfd0.png

 

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:

Ouvrir la page de configuration de votre site (icône roue crantée tout en haut à droite dans la barre administrative)

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")

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">

 

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

 

pr3.thumb.png.98193b50a5c4feeb774fcb4cde686fa7.png

 

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

 

pr4.png.2d40e704bc414628b3e8bc7ca2766d48.png

 

 

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

p9.png


 

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonsoir @roger,

Et merci pour ton investissement dans cette mission impossible !

Tout fonctionne comme tu l'annonces : MERCI.

Mais comme toi je reste sur ma faim avec ce code qui disparaît à l'édition. Tu n'y es évidemment pour rien et le seul en cause est bien tinymce.

Philippe

  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites

Merci Philippe pour le compliment sur mon travail.

Moi aussi je reste sur ma faim concernant le fait que TinyMCE efface systématiquement et uniquement le code HTML quand on veut éditer in message; des jours de recherche pour ma part, pas mal de tests de ce coté là sur ce que je trouvais mais rien d'efficace pour résoudre cet ultime soucis.

Heu je veux juste rectifier une petite phrase

il y a une heure, augras a dit :

investissement dans cette mission impossible !

Rien n'est impossible si l'on veut vraiment chercher quelque chose, il est juste impossible parfois d'arriver à un résultat 100% conforme aux attentes des utilisateurs car le % manquant n'existe pas ou plus...Donc parfois un "truc qui marche à 99%" saura combler celui à qui il est destiné pour peut que l'on trouve une astuce pour palier au 1% manquant.

Roger

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 1 heure, Fred a dit :

Dans init.js :

 


    cleanup : false,
    verify_html : false

Salut Fred.

Je viens tout juste d'essayer ton code.

Je l'ai placé ainsi dans mon init.js:

        // Empêcher le nettoyage du HTML
        cleanup : false,
        verify_html : false,
	// extended_valid_elem

Que l'on mette une , ou pas après verify_html et bien c'est pareil, tinymce efface toujours les balises < et les remplace par leur équivalents "caractères spéciaux html" mais ferme aussi systématiquement la balise markup en tout début et fin de codes à afficher.

Ceci est le code html qui fonctionne la toute premiere fois que l'on rédige le code:

<pre class="language-markup"><code>
<div class="row">
		<div class="col2"><!--?php echo template::button('userAddBack', [
'class' => 'buttonGrey',
'href' => helper::baseUrl(false),
'ico' => 'home',
'value' => 'Accueil'
]); ?-->
    </div>
	<div class="col2 offset8"><!--?php echo template::button('userAdd', [
'href' => helper::baseUrl() . 'user/add',
'ico' => 'plus',
'value' => 'Utilisateur'
]); ?-->
     </div>
</div>
</code></pre>

Si on ré-édite la page pour rajouter d'autres codes, et bien le code HTML est aussitôt nettoyé par le tinymce. Il devient alors en code source ceci: en images

 

Le code copié la première fois et enregistré aussitot

bug.thumb.png.a00b8fb15cd94f698feb0059a68a68b4.png

 

Lors de la réédition de la page, voici comment il apparaît

bug1.png.89a53db79176bb78b46c449bfccd3679.png

 

Et en code source, on voit bien de  les balises de fermeture </code> & </pre> sont rajoutées en tout début de code mais aussi tout à la fin où là tinymce ajoute la balise complète du code mais vide..

<pre class="language-javascript"><code></code></pre>

bug2.png.caf6aa6734a29737eb3d47a962a549ed.png

 

Ce qui au final si on enregistre la page donne ceci!!!!

bug3.thumb.png.6649f0b47955967bce2ea6b590446cc1.png

 

Copier en double les div et les boutons, mais pas le code HTML censé se trouver au milieu...

 

👍 Merci Fred pour le code, je crois que celui là je ne l'avais pas trouvé, donc pas essayé. Mais comme tout les autres, il est inefficace concernant le HTML donc on cherche toujours une soluce et je paye la bière à celui ou celle qui la trouve  😀

 

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour @roger,

 

Si la suggestion de @Fred fonctionne.

 

Je l'ai placé avant ou après la partie 'Codemirror', dans les 2 cas ça fait le job.

 

Suite à une Réédition :

2020-12-08_17h22_32.png.3f56c7bd4d2acb093e10370a5b31f5fa.png

 

Tu as fait le Ctrl F5 ?

 

Bière belge plutôt brune.

 

Bonne soirée

 

Sylvain

 

PS : je n'ai pas de coloration syntaxique pour le php

 

 

init.js

Partager ce message


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

@roger tu vas pouvoir nous payer un bock de bière, ça fonctionne bien chez sur des commandes CSS

Héhéh, je t'en offrirais une mais uniquement une "tourtel sans alcool" car j'ai suivi ton indication, effectivement à placer dans le "init.js" mais pour le "pack de bières complet et avec le % voulu d'alcool comme toute bière digne de ce nom qui se respecte" et bien se sera Sylvain qui recevra ce joli colis virtuel car la précision de l'endroit où placer un truc..compte beaucoup pour que ce "truc" fonctionne...sauf que chez moi, ça ne marche pas (et ce malgré une  vidange complète du cache des MES NAVIGATEURS, je teste tout avec plusieurs navigateurs, malgré l'astuce de la touche clavier ctrl+ F5....)

Il y a 1 heure, sylvainlelievre a dit :

Je l'ai placé avant ou après la partie 'Codemirror', dans les 2 cas ça fait le job.

Sylvain, j'ai téléchargé ton zip ai dessus et comparé celui ci au mien, seul l'emplacement n'était pas le bon. J'ai donc modifié mon init.js pour mettre le code au même endroit que toi....résultat de l'expérience, c'est pareil qu'avant.

💡comme je suis un "fou qui tente tout", et bien j'ai purement et simplement remplacé mon init.js dans le tinymce par le tien!!!! (Bin vi qui ne ttente rien n'a rien) puis idem, rafraichissement de tout mes cache de navigateurs et hop je réessaie le truc.

 

😋  😃  😉  🙁  😥 😂....J'en suis toujours aux même résultat ça ne fonctionne pas chez moi grrrrrrrrrrrrrrrrrrrr

 

Suis tout de même  "bon prince" car vous êtes les seuls à proposer des solutions pour régler le "bins" et Philippe qui a tester "prism" et en a rapporté ici son appréciation sur le sujet.

Alors pour toi @Fred et  @sylvainlelievre cadeau avant l'heure.

eyJidWNrZXQiOiJzYXZldXJiaWVyZSIsImtleSI6 heu y'a le choix

 

Et pour @augras un bloc de foie gras si tu peux faire un ultime test avec les infos de Fred et Sylvain au dessus 😇 Philippe, promis il viendra po de Pologne mon canard (enfin son foie retravaillé).

 

Plus sérieux je ne comprend pas ce qui fonctionne chez vous ne veut pas le faire chez moi;

Vous souhaiteriez Fred, Sylvain que je vous ouvre un accès admin sur ma dernière 10.3.10 en ligne pour vérifier par vous même? Car là moi je deviens un poil dingo de voir que ça marche chez vous deux et pas chez moi.

 

Roger

 

 

Partager ce message


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

Tu insères quoi comme script parce que là on parle bien de CSS et pas de Php. 

Uniquement le minimum pour la coloration syntaxique proposée par code sample, le tout est écrit ainsi dans mon init.js juste en dessous des consignes à appliquer à code mirror.

(afin de garder propre le fichier de configuration du tinymce j'ai commenté par deux // l'intitulé d'origine de codesample en y écrivant prism associé à CS)

        // Codesample associé à prism  
        codesample_languages: [
            {text: 'HTML/XML', value: 'markup'},
            {text: 'JavaScript', value: 'javascript'},
            {text: 'CSS', value: 'css'},
            {text: 'PHP', value: 'php'},
            {text: 'Ruby', value: 'ruby'},
            {text: 'Python', value: 'python'},
            {text: 'Java', value: 'java'},
            {text: 'C', value: 'c'},
            {text: 'C#', value: 'csharp'},
            {text: 'C++', value: 'cpp'}
            ],

En pièce jointe ci dessous, mon init.js tel qu'il est en place sur la version 10.3.10 actuelle de zwii. C'est sur celui là que la toute première fois ça avait marché l'une de tes astuces (en 10;3;09) puis plus rien....

 

==> init.js.zip

 

Roger

 

 

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour @roger,

 

J'avais un problème avec la coloration syntaxique du php, en fait c'est que ton fichier prim.js ne le prenait pas en compte. Avec le prism.js ci joint ça fonctionne pour le html, css, javascript ET php .

 

Point de détail réglé.

 

A l'utilisation de codesample + prism + okaidia j'ai  le fonctionnement suivant,

 

avec php :

  • Si je ne mets pas les balises  <?php  ?>  je peux sans problème rééditer
  • Si j'encadre mon texte php avec je ne peux plus rééditer ! tinymce l'a effacé ."Normal"...

 

avec javascript :

  • Je peux encadrer mon texte javascript avec les balises <script> </script> ou non dans les 2 cas je peux rééditer. Là tinymce se contente d'effacer les balises sans effacer le texte javascript (comportement différent ).

 

Enfin si je remplace mon fichier init.js (joint) par ton fichier init.js (zip plus haut) j'obtiens exactement le même fonctionnement.

 

Voilà pour ces essais qui sans conteste me rapprochent un peu plus de la bière belge !

 

Bonne journée

 

Sylvain

 

PS : avec mon prism.js l'erreur 404 dont je t'avais parlé en MP a disparu.

 

 

prism.js init.js okaidia.css

Modifié par sylvainlelievre
  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour à tous,

Merci pour vos efforts qui semblent avoir portés leurs fruits : je teste et reviens vous dire ce que ça donne chez moi.

Même si je n'ai pas participé pour trouver la solution je suis plutôt comme @sylvainlelievre, une bonne brune, mais j'apprécie aussi beaucoup les rousses : une bonne smithwick's irlandaise me met les papilles en émoi !

J'ai bien noté que je n'aurai droit "qu'à" du foi gras : pauvre de moi 🙂

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonsoir,

J'ai modifié le init.js comme indiqué en ajoutant avant la partie codemirror

cleanup : false,
    verify_html : false

J'ai mis un fichier prism.js avec l'ensemble des langages téléchargé directement sur le site de prism.

 

Pour mettre du code, html, php, javascript, css : tout est ok.

 

Par contre à l'édition :

- CCS : ok

- html : interprêté !

j'ai mis volontairement du code pour tester, celui ci-dessous, qui justement donne un résultat très net quand interprêté

<div id="swiper" class="swiper-container swiper-container-horizontal">
		<div class="swiper-wrapper">
				<div class="swiper-slide swiper-slide-active"><a href="/zwii91dev59/site/file/source/galerie/space/cosmos.jpg" target="_blank" rel="noopener" data-lity=""><img title="Cosmos" src="/zwii91dev59/site/file/source/galerie/space/cosmos.jpg" /></a>
						<div class="swiper-text">Le cosmos</div>
				</div>
				<div class="swiper-slide swiper-slide-active"><a href="/zwii91dev59/site/file/source/galerie/space/nebula.jpg" target="_blank" rel="noopener" data-lity=""><img title="Nebula" src="/zwii91dev59/site/file/source/galerie/space/nebula.jpg" /></a>
						<div class="swiper-text">Une nébuleuse</div>
				</div>
				<div class="swiper-slide swiper-slide-active"><a href="/zwii91dev59/site/file/source/galerie/landscape/iceberg.jpg" target="_blank" rel="noopener" data-lity=""><img title="Iceberg" src="/zwii91dev59/site/file/source/galerie/landscape/iceberg.jpg" /></a>
						<div class="swiper-text">GlaGla</div>
				</div>
				<div class="swiper-slide swiper-slide-active"><a href="/zwii91dev59/site/file/source/galerie/landscape/meadow.jpg" target="_blank" rel="noopener" data-lity=""><img title="Meadow" src="/zwii91dev59/site/file/source/galerie/landscape/meadow.jpg" /></a>
						<div class="swiper-text">Super !</div>
				</div>
		</div>
		<div class="swiper-pagination"></div>
		<div id="swiper-button-prev" class="swiper-button-prev swiper-button-white"> </div>
		<div id="swiper-button-next" class="swiper-button-next swiper-button-white"> </div>
</div>

Quand on regarde le code même remarque que @roger le code html est encadré, avant et après par 

<pre class="language-markup"><code></code></pre>

- javascrip : tout ce qui est entre les balises <script>     </script> ou bien sous cette forme

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>

disparaît

- php : tout ce qui est entre <?php     ?> et <!--     --> disparaît

 

Voilà ce que je constate.

 

On progresse très nettement.

Modifié par augras

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour,

 

Suite à la modification introduite dans le init.js de tinymce avec la maj 10.3.13 je viens de tester à nouveau.

 

Pour mettre du code, html, php, javascript, css : tout est ok. Les balises des différents langages sont toutes conservées et l'intégralité des code est conforme à ce qui a été copié.

 

Par contre à l'édition :

- CCS : ok

- html : interprêté ! Tout le code est déplacé en dehors des balises <code></code> et encadré par ce code <pre class="language-markup"><code></code></pre>

- javascript : les balises <script>>/script> sont effacées mais le code entre les balise reste. On progresse donc mais avec un code comme celui-ci

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>

tout est toujours effacé.

- php : la majorité du code n'apparaît plus et une petite partie qui affiche simplement du texte est interprétée. Le code entre <!--     --> n'est plus effacé et celui entre <?php     ?> est déplacé en dehors des balises <code></code>  et encadré également, comme pour le html par <pre class="language-markup"><code></code></pre> !  Mais en plusieurs morceaux sans que je comprennent où les coupures étaient effectuées.

 

On peut intégrer du code mais il ne faut surtout pas éditer la page sans prendre de grandes précautions qui sont beaucoup trop fastidieuses.

Modifié par augras
  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites

Tu as raison Phillippe, c'est un vrai calvaire que cette effacement automatique de code par le Tinymce....et nous n'avons toujours pas de solution a ce jour sauf à prendre l’extrême précaution de copier le code d'origine avant de le remettre une fois la page corrigée.

C'est bien dommage car cette coloration des codes est tellement utile en certains cas.

Peut être un jour la solution sera trouvée...

Partager ce message


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

javascript : les balises <script>>/script> sont effacées mais le code entre les balise reste. On progresse donc mais avec un code comme celui-ci


<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>

tout est toujours effacé.

allow_script_urls: true

 

Google est notre meilleur ami

Partager ce message


Lien à poster
Partager sur d’autres sites

Toujours le même résultat.

Mais je n'ai peut-être pas mise la ligne au bon endroit !

Je l'ai ajouté, avec la virgule en plus, en ligne 35 juste après le code que tu as déjà ajouté

// Autorise l'ajout de script
	extended_valid_elements: "script[language|type|src]",
	allow_script_urls: true,

 

 

Partager ce message


Lien à poster
Partager sur d’autres sites

J'ai peut-être mis le doigt sur quelque chose !

Quand on copie le code suivant dans la fenêtre de code sample

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>

il apparaît dans l'éditeur de code de tinymce, codemirror, comme ça (il faut aller voir le code avant d'avoir enregistré la page)

<pre class="language-javascript"><code>&lt;script src="https://unpkg.com/swiper/swiper-bundle.js"&gt;&lt;/script&gt;</code></pre>

Et c'est normal puisque c'est ce qu'il y a d'indiquer dans la doc de prims :

Note: You have to escape all < and & characters inside <code> elements with &lt; and &amp; respectively, or else the browser might interpret them as an HTML tag or entity. If you have large portions of HTML code, you can use the Unescaped Markup plugin to work around this.

 

Et donc codesample fait le boulot correctement, même un peu plus puisqu'il remplace également > par &gt. Sauf que manifestement après enregistrement de la page, là tout est encore bon puisque les codes apparaissent normalement, dès que l'on édite cette page les codes d'évitement sont remplacés par les signes qu'ils remplacent ce qui provoque divers comportement comme la disparition du code. Et je me dis que du coup codemirror a peut-être une responsabilité.

 

Il est impossible dans codemirror de mettre directement

<pre class="language-javascript"><code><script src="https://unpkg.com/swiper/swiper-bundle.js"></script></code></pre>

Quand on essaye le code est évidemment copié mais dès que l'on valide la partie entre les balises <code</code> est supprimée et on ne retrouve dans l'éditeur de code que 

<pre class="language-javascript"><code></code></pre>

 

Ce qui me fait dire qu'à l'édition de la page c'est codemirror qui interprète et provoque les dysfonctionnements constatés.

 

On ne cherche peut-être pas du bon côté.

Modifié par augras

Partager ce message


Lien à poster
Partager sur d’autres sites

Philippe, il ne faut pas oublier une chose importante....

 

Prism tout comme codesample servent exclusivement à afficher du code qui sera coloré.

Dans le cas que tu cites, afficher du code js ce n'est pas les balises <script>....</script> qu'il faut copier dans la boite où tu entres tes écritures mais bien une fois ouvert ton fichier js ce qu'il contient!!!!

 

C'est exactement la même chose pour le css, tu veux afficher du css à copier et bien tu n'entres pas les balises en html qui stipule que le fichier est un fichier de style mais son intérieur à savoir le code css qu'il contient...

 

Un simple exemple visuel avec du code depuis l'éditeur de texte ici:

Tu connais comme moi le  fichier core.js.php que tout les zwii embarque avec eux...et bien si tu veux montrer son code à l'intérieur (donc les codes qui seraient mis en évidence avec la coloration) tu le présenterais ainsi:

Bonne méthode pour afficher du code

/**
 * Crée un message d'alerte
 */
core.alert = function(text) {
	var lightbox = lity(function($) {
		return $("<div>")
			.addClass("lightbox")
			.append(
				$("<span>").text(text),
				$("<div>")
					.addClass("lightboxButtons")
					.append(
						$("<a>")
							.addClass("button")
							.text("Ok")
							.on("click", function() {
								lightbox.close();
							})
					)
			)

mauvaise méthode

<script src="/core/core.js.php"></script>

Moi aussi j'ai pensé que code mirror y était pour quelque chose, mais en le désactivant le résultat était le même...

Tinymce nettoie automatiquement toute balises html à moins que celles ci ne fassent partie intégrante dans un template .

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour @roger,

Je ne suis pas d'accord :).

On doit pouvoir mettre l'intégralité du code : c'est ce qui se passe ici sur le forum et d'ailleurs ça fonctionne aussi dans zwii... la première fois.

L'intégralité du code est parfaitement prise en compte lorsque l'on utilise l'extension codesample qui insert le code conformément à la documentation de prism avec les caractères d'évitement pour justement éviter qu'il soit interprété : tout fonctionne normalement et c'est nickel.

Si l'on met à la main le code dans l'éditeur de code, sous réserve de bien mettre les caractères d'évitement, tout fonctionne également et c'est normal.

Le problème est qu'à l'édition suivante ces caractères d'évitement sont manifestement remplacés par le signe qu'il remplacent provoquant les dysfonctionnements relevés : qui est responsable de tinymce ou codemirror, codesample est à priori sorti de l'équation à ce niveau,  je ne sais pas ?

Si les caractères d'évitement étaient conservés le code serait toujours affiché correctement.

 

En désactivement codemirror l'éditeur de code de tinymce ne peut plus fonctionner ? Si ?

 

On va trouver... un jour !

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
      Voir le fichier Générateur de mot de passe simple
      Générateur de mot de passe à héberger
       
      Le module simplemotdepasse (Simple générateur de mot de passe) vous permettra de générer pour vos utilisateurs un mot de passe comportant différents caractères  (Mot de passe non sécurisé).
      100% compatible avec les versions 10.03.xx et celles à venir du CMS Zwii.
       
      Les mots de passe générés sont au format texte et peuvent être utilisés directement pour changer/créer un mot de passe d'un utilisateur à transmettre à celui ci.
      Ils peuvent aussi servir à d'autres endroits ou dans d'autre scripts demandant ce même type de mot de passe (exemple: Partage de dossiers/fichiers bien précis stockés sur vos espaces web);
      Le mot de passe généré peut ensuite être copier directement depuis un bouton prévu à cet effet puis coller là où ce sera nécessaire de mettre ce nouveau mot de passe non crypté...
      *  Ce module  étant basé sur le module officiel Redirection du cms, il est directement utilisable depuis l'éditeur TinyMCE en cliquant sur la barre d'outil "lien" dans celui ci. Cela vous permettra de proposer dans votre site (menu du site) une page dédiée à vos utilisateurs qui pourra s'ouvrir dans le fenêtre actuelle de votre navigateur ou dans un nouvel onglet de celui ci.
       

       

       

       

       

       
      Mise en œuvre
      1° Télécharger l'archive "simplemotdepasse.zip" et la décompresser sur votre pc.
      2° Envoyer le dossier nommé "module" à la racine de votre site crée avec ZwiiCMS
       
      Utilisation:
      1° Créer une page que vous nommerez du nom que vous désirez, par exemple "Générateur de mot de passe simple" ou autre....

       
      2° Choisir si cette page doit s'ouvrir dans l'onglet courant de votre navigateur ou dans un nouvel onglet ainsi que les droits de visibilité.

       
      3° Dans la partie module, sélectionner le module "Simplemotdepasse" puis cliquer sur la petite roue crantée pour entrer le lien de redirection vers le générateur de mot de passe.
       

       
      5° Dans la fenêtre qui s'ouvre entrer l'adresse qui ouvrira la page où vous pourrez générer un mot de passe ainsi:
        -  Si votre site est à la racine de votre nom de domaine ==>    /module/simplemotdepasse/view/vendor/Sgmdp.php
        -  Si votre site se trouve dans un sous dossier à la racine de votre nom de domaine ==>    /Nom_du_sous_dossier/module/simplemotdepasse/view/vendor/Sgmdp.php
       

       
      6° Enregistrer la configuration de la redirection puis la configuration de votre page.
       
      Restauration de votre ancienne configuration
      Rien de bien compliqué il vous suffit de supprimer le dossier "simplemotdepasse" dans le dossier module, de supprimer la page concernée par ce module et puis c'est tout. Vous retrouverez alors votre site ZwiiCMS tel que vous l'aviez conçu avant de vous servir de ce générateur de mot de passe.
       
      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 module 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 26/12/2020 Catégorie Les modules  
    • Par roger
      Générateur de mot de passe à héberger
       
      Le module simplemotdepasse (Simple générateur de mot de passe) vous permettra de générer pour vos utilisateurs un mot de passe comportant différents caractères  (Mot de passe non sécurisé).
      100% compatible avec les versions 10.03.xx et celles à venir du CMS Zwii.
       
      Les mots de passe générés sont au format texte et peuvent être utilisés directement pour changer/créer un mot de passe d'un utilisateur à transmettre à celui ci.
      Ils peuvent aussi servir à d'autres endroits ou dans d'autre scripts demandant ce même type de mot de passe (exemple: Partage de dossiers/fichiers bien précis stockés sur vos espaces web);
      Le mot de passe généré peut ensuite être copier directement depuis un bouton prévu à cet effet puis coller là où ce sera nécessaire de mettre ce nouveau mot de passe non crypté...
      *  Ce module  étant basé sur le module officiel Redirection du cms, il est directement utilisable depuis l'éditeur TinyMCE en cliquant sur la barre d'outil "lien" dans celui ci. Cela vous permettra de proposer dans votre site (menu du site) une page dédiée à vos utilisateurs qui pourra s'ouvrir dans le fenêtre actuelle de votre navigateur ou dans un nouvel onglet de celui ci.
       

       

       

       

       

       
      Mise en œuvre
      1° Télécharger l'archive "simplemotdepasse.zip" et la décompresser sur votre pc.
      2° Envoyer le dossier nommé "module" à la racine de votre site crée avec ZwiiCMS
       
      Utilisation:
      1° Créer une page que vous nommerez du nom que vous désirez, par exemple "Générateur de mot de passe simple" ou autre....

       
      2° Choisir si cette page doit s'ouvrir dans l'onglet courant de votre navigateur ou dans un nouvel onglet ainsi que les droits de visibilité.

       
      3° Dans la partie module, sélectionner le module "Simplemotdepasse" puis cliquer sur la petite roue crantée pour entrer le lien de redirection vers le générateur de mot de passe.
       

       
      5° Dans la fenêtre qui s'ouvre entrer l'adresse qui ouvrira la page où vous pourrez générer un mot de passe ainsi:
        -  Si votre site est à la racine de votre nom de domaine ==>    /module/simplemotdepasse/view/vendor/Sgmdp.php
        -  Si votre site se trouve dans un sous dossier à la racine de votre nom de domaine ==>    /Nom_du_sous_dossier/module/simplemotdepasse/view/vendor/Sgmdp.php
       

       
      6° Enregistrer la configuration de la redirection puis la configuration de votre page.
       
      Restauration de votre ancienne configuration
      Rien de bien compliqué il vous suffit de supprimer le dossier "simplemotdepasse" dans le dossier module, de supprimer la page concernée par ce module et puis c'est tout. Vous retrouverez alors votre site ZwiiCMS tel que vous l'aviez conçu avant de vous servir de ce générateur de mot de passe.
       
      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 module 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 Générateur de mot de passe sécurisé
      Générateur de mot de passe à héberger
       
      Le module Gmdp (générateur de mot de passe) vous permettra de générer pour vos utilisateur à partir d'un mot de passe voulu de crypter celui ci de façon sécurisée (hash).
      100% compatible avec les versions 10.03.xx et celles à venir du CMS Zwii.
       
      Les mots de passe générés sont au même format que celui utilisé par le ZwiiCMS (ceux du user.json) et peuvent être utilisés directement pour changer dans ce fichier le mot de passe d'un utilisateur.
      Ils peuvent aussi servir à d'autres endroits ou dans d'autre scripts demandant ce même type de mot de passe (exemple: Partage de dossiers/fichiers bien précis stockés sur vos espaces web);
      Le mot de passe généré peut ensuite être copier directement depuis un bouton prévu à cet effet puis coller là où ce sera nécessaire de mettre ce nouveau mot de passe crypté...
       
      * Ce module  étant basé sur le module officiel Redirection du cms, il est directement utilisable depuis l'éditeur TinyMCE en cliquant sur la barre d'outil "lien" dans celui ci. Cela vous permettra de proposer dans votre site (menu du site) une page dédiée à vos utilisateurs qui pourra s'ouvrir dans le fenêtre actuelle de votre navigateur ou dans un nouvel onglet de celui ci.
       

       

       

       

       

       
      Mise en œuvre
      1° Télécharger l'archive "motdepassse.zip" et la décompresser sur votre pc.
      2° Envoyer le dossier nommé "module" à la racine de votre site crée avec ZwiiCMS
       
      Utilisation:
      1° Créer une page que vous nommerez du nom que vous désirez, par exemple Génération de mot de passe

       
      2° Choisir si cette page doit s'ouvrir dans l'onglet courant de votre navigateur ou dans un nouvel onglet

       
      3° Dans la partie module, sélectionner le module "motdepasse" puis cliquer sur la petite roue crantée pour entrer le lien de redirection vers le générateur de mot de passe.

       
      5° Dans la fenêtre qui s'ouvre entrer l'adresse qui ouvrira la page où vous pourrez générer un mot de passe ainsi:
        -  Si votre site est à la racine de votre nom de domaine ==>    /module/motdepasse/view/vendor/Gdmp.php
        -  Si votre site se trouve dans un sous dossier à la racine de votre nom de domaine ==>    /Nom_du_sous_dossier/module/motdepasse/view/vendor/Gdmp.php
       

       
      6° Enregistrer la configuration de la redirection puis la configuration de votre page.
       
      Restauration de votre ancienne configuration
      Rien de bien compliqué il vous suffit de supprimer le dossier "motdepass" dans le dossier module, de supprimer la page concernée par ce module et puis c'est tout. Vous retrouverez alors votre site ZwiiCMS tel que vous l'aviez conçu avant de vous servir de ce générateur de mot de passe.
       
      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 module 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 25/12/2020 Catégorie Les modules  
×
×
  • Créer...