[RESOLU]Comment insérer des exemples de code dans tinymce ?

[augras 278]

Bonjour,

Il me semblait que l'on pouvait insérer du code dans tinymce : je ne l'ai jamais fait mais là je viens d'essayer et le code est interprété ce que je ne veux pas.

J'ai bien regardé tous les boutons et les menus mais n'ai rien vu qui pouvait me permettre de faire cela.

Qu'est-ce que je rate ?

Merci,

Philippe

Modifié par augras

[roger 272]

il y a 4 minutes, augras a dit :

Il me semblait que l'on pouvait insérer du code dans tinymce : je ne l'ai jamais fait mais là je viens d'essayer et le code est interprété ce que je ne veux pas.

J'ai bien regardé tous les boutons et les menus mais n'ai rien vu qui pouvait me permettre de faire cela.

Qu'est-ce que je rate ?

C'était possible avant avec le bon "plug" incorporé dans le tinymce, ce pourrait être possible si tu allait faire un tour dans ce sujet et y faisait ensuite une remarque sur ce que tu voudrais de plus dans le Tinymce comme la fameuse histoire de la taille des font d'écriture.

Mais je connais un "gus" sur le forum qui va te répondre à ta question immédiatement en te soufflant à l'oreille: 😋

 

"Philippe, vas direct dans le fichier init.js dans le dossier du tinymce et tu ajoute tout simplement dans la partie plugin "codesample" et dans la partie toolbar "codesample" et là tu pourra mettre du code dans ton site sans qu'il soit interprété directement une fois publié ton article"...

Et si tu es "sage" il te donnera même certaines astuce css pour encadrer de jolie façon les boites de dialogue des différents code que tu auras publier sur ton site en ligne 👌

	plugins: "advlist anchor autolink autoresize autosave codemirror codesample 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 codesample | code fullscreen",

L'est pas belle la vie?

PS:

Avec un gros inconvénient pour codesample, ça déborde légèrement sur les cotés alors il faut aller dans sa partie prism.css pour régler le truc.

@augras je recherche les fameux codes pour le css et dés que je les retrouve chez moi je te les redonne aussitôt (cela fonctionnait avec les V9, puis v10) patientes juste un peu mon ami car je ne sais pas où je les ai remisé ceux là, mais une chose est certaine, je les ai toujours quelque part.

[augras 278]

C'est ça @roger, tu as trouvé le plugin : code sample.

Mais il me semblait justement qu'il était intégré ! J'ai rêvé ?

Il y a bien dans le menu Format une entrée Code et je pensais que c'était ça mais ça ne fonctionne pas : le code est interprété ou alors tinymce traite ça à sa façon ce qui revient à avoir un vrai foutoir dans le code et rien qui s'affiche.

Si je suis ce que tu écris le plugin est bien présent par contre il manque simplement les entrées dans le init.js pour l'activer et mettre le bouton dans la barre d'outils ?

[roger 272]

il y a 28 minutes, augras a dit :

C'est ça @roger, tu as trouvé le plugin : code sample.

Mais il me semblait justement qu'il était intégré ! J'ai rêvé ?

Philippe non tu n'as pas rêvé, il est intégré au zwii depuis bien longtemp mais juste pas déclaré dans le fichier init.js.

Si tu suis à la lettre ce que je t'ai écris au dessus tu pourras l'utiliser immédiatement

 

Et comme je n'ai qu'une seule parole, je viens de passer 1 petite demie heure pour te retrouver le code qui va bien pour que prisme affiche n'importe quelle intégration de code dans l'exacte largeur de ton site, ça marche depuis les versions V8 jusqu'au version actuelles V10.3.08 et ça marchera encore avec les versions futures!!!!

Ajoutes ceci dans ton css perso pour aller vite si tu veux tester de suite:

/* Code blocks */
@media screen {
  pre[class*="language-"] {
    margin: 10px;
    padding: 10px;
    border: 1px solid;
    background: rgba(6,42,107,1);
    color: #fff;
    overflow: auto;
}
}
/* Fin perso Code blocks */

 

Je t'envoie un mp de suite avec le lien vers le site Zwii où tu pourras voir de tes yeux que ma solution fonctionne (bin vi adresse de site devant rester confidentielle sauf à qui je la donne).

Roger

[augras 278]

J'ai effectivement constaté que le plugin codesample était bien présent mais pas déclaré dans init.js de tinymce.

J'ai fait comme tu l'indiques et tout est rentré dans l'ordre : MERCI.

Le css perso ne semble plus nécessaire maintenant : mais au cas où je le garde de côté.

 

Chose étonnante : j'ai bien la coloration syntaxique qui s'affiche dans ma page après avoir inséré le code via codesample mais dès que j'ai enregistré la page elle disparaît !

 

J'ai alors déclaré prism dans le head et dans body mais rien à faire toujours pareil.

 

Encore merci et bonne soirée.

[roger 272]

Philippe, je fais du rab pour 5mn afin de t'aider un peu plus....sinon demain je serais plus dispos;

 

Dans le init.js, tu peux ajouter ceci au cas où...

 

// code sample
  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' }
  ],

je te donne aussi le lien chez tinymce où tu pourras prendre quelques infos ci besoin est...

https://www.tiny.cloud/docs-4x/plugins/codesample/

 

cela doit fonctionner chez toi comme tu as pu le voir avec le lien que je t'ai envoyé par mp. Si ça marche pas c'est que tu as fait une erreur de copie quelque part, revérifies bien tout au cas où...

A demain Philippe en espérant que tu auras réussi entre deux à ce que cela fonctionne chez toi.

Roger

[augras 278]

Bonsoir @roger,

tout ça est déjà correct chez moi.

Tu n'as pas non plus la coloration syntaxique dans ton exemple : tu as le même résultat que moi.

 

A l'édition d'un page tout va bien, j'obtiens par exemple ça :

 

Par conte dès que j'enregistre la page la coloration disparaît et j'ai ça :

 

Dans l'idéal se serait bien que la coloration syntaxique apparaisse.

 

Par ailleurs, après avoir enregistré la page quand on revient en mode édition le code n'apparaît pas : j'ai un rectangle vide !

Quant j'édite le code de la page j'ai également des lignes vides.

 

Cela implique que l'on ne peut pas corriger.

Mais surtout après enregistrement le code n'est plus présent... ce qui est apparemment normal puisqu'il n'y a rien nulle part.

 

C'est vraiment tordu comme truc.

 

Modifié par augras

[roger 272]

Salut Philippe;

il y a une heure, augras a dit :

tout ça est déjà correct chez moi.

Je suis bien content que tu ai réussi cette partie là en suivant "le guide".

 

il y a une heure, augras a dit :

Tu n'as pas non plus la coloration syntaxique dans ton exemple : tu as le même résultat que moi.

Bin c'est normal car tu ne demande pas tout en même temps, donc je te fais dans l'urgence pour que tu installe codesample correctement et ne me soucie pas de la coloration...qui doit s'ajouter par tes propres soins car prisme dans son css affiche juste la coloration à minima que dans l'éditeur de texte....

 

😘 Je pense que tu reconnaîtras sur la capture d'écran, un lieu que tu as découvert hier. Ne serait ce pas ceci que tu désirerais chez toi?

 

Petite secret entre nous deux 'j'aime toujours pas l'eau dans le r....d" mais j'adore offrir le petit truc qui va bien, tu es prêt Philippe pour aller dans ton css perso (ou dans le css de prisme si tu préfères) et y ajouter des couleurs? Ho bien entendu tu pourras les changer pour les tiennes car là j'ai mis des couleurs voyantes pour différencier les différentes boites de codes

@media screen {
  pre[class*="language-markup"] {
    margin: 10px;
    padding: 10px;
    border: 1px solid;
    background: rgba(6,42,107,1);
    color: #fff;
    overflow: auto;
}
     pre[class*="language-javascript"] {
    margin: 10px;
    padding: 10px;
    border: 1px solid;
    background: #ffd9c0;
    color: #000;
    overflow: auto;
} 
   pre[class*="language-css"] {
    margin: 10px;
    padding: 10px;
    border: 1px solid;
    background: #e7ffc0;
    color: #000;
    overflow: auto;
} 
    pre[class*="language-php"] {
    margin: 10px;
    padding: 10px;
    border: 1px solid;
    background: #c0d9ff;
    color: #000;
    overflow: auto;
} 
}

💡 Tout le secret pour que chaque boite de code ait sa propre couleur réside dans la terminaison de pre[class*="language-"] qui doit contenir le nom de la variable de code par exemple pour du PHP ce sera cette variable là:  pre[class*="language-php"]

 

il y a une heure, augras a dit :

Par ailleurs, après avoir enregistré la page quand on revient en mode édition le code n'apparaît pas : j'ai un rectangle vide !

Et là avec ton exemple donné, je vais te répondre que c'est normal car le "hic" avec code sample c'est que si tu copie du HTML dans une boite html et que tu veux l'éditer ensuite (même en code source) et bien il a disparu...et là je n'ai qu'une seule solution "maison" à te proposer:

Il te faut remplacer chaque balise < par # et prévenir celui qui copiera le code de remplacer le # par le début de la balise HTML remplacée; c'est la seule solution que j'ai trouvé à l'époque pour contrecarrer cela...

Ainsi tu peux éditer sans problème tout ce que tu mets comme code en HTML,

Exemple avec le remplacement d'une seul balise pour une image

 

 

Et si tu édites ton code dans l'éditeur en code source et bien là aussi il est conservé tel que lorsque tu l'as crée.

 

Il y a 1 heure, augras a dit :

C'est vraiment tordu comme truc.

 

Je suis 100% d'accord avec toi et maintenant tu n'as plus qu'à appliquer à la lettre les explications que je viens de te donner dans ce post pour ensuite venir ici et écrire "Yep chouette ça marche super cette fois ci", surtout pas d'eau mais de la neige pour moi, ce sera l'un de mes future templates à préparer 😉

 

Au plaisir de te lire Philippe.

Roger

[augras 278]

Bonsoir @roger,

Je pensais que @jasongouzien se joindrait à nous  suite à sa demande d'intégration de prism !

J'ai paramétré comme je l'indiquais dans ma réponse et comme indiqué sur le site de prism mais ça n'a rien changé au résultat.

Merci @roger mais je parle de la coloration du code pas du fond du bloc de texte : regarde dans la première capture que je mets, les balises ont une couleur, le href une autre, c'est de ça qu'il s'agit. Il y a une coloration pour chaque langage, chaque balise, chaque argument : ça rend le code plus facile à lire et à comprendre.

Normalement codesample gère ça et il le fait d'ailleurs tant qu'on n'a pas enregistré, mais après cette coloration disparaît et surtout le code ne reste pas suite à nouvelle édition. Ou alors mon tynimce est marabouté !

[roger 272]

Il y a 1 heure, augras a dit :

J'ai paramétré comme je l'indiquais dans ma réponse et comme indiqué sur le site de prism mais ça n'a rien changé au résultat.

Merci @roger mais je parle de la coloration du code pas du fond du bloc de texte :

Bin  vi...et qui a t'il sur le site où il est expliqué comment intégrer la coloration syntaxique dans tinymce?

Citation

Vous devez ajouter prism.jset prism.cssà votre page afin d'obtenir les exemples de code en surbrillance de syntaxe sur votre page Web (tels que créés par le plugin Code Sample). Le plugin Code Sample utilise les langages suivants: balisage, javascript, css, php, ruby, python, java, c, csharp et cpp. Vous pouvez générer les fichiers prism.jset prism.csssur la page de téléchargement du site Web de Prism.

 

Troisième petit secret de ma part si tu veux obtenir ceci une fois ton code publié..et qui fonctionne sur tout les zwii depuis les version V8, tu as déjà la moitié du prisme (le css qui est dans code sample, il ne te manque que le js de prism qu'il faut ensuite intégrer dans le zwii)

 

Alors comme je suis certain que tu n'as pas du (ou alors je suis médisant) télécharger le js de prism, je te l'offre ci dessous;

==> prism.js.zip

 

Une fois décompressé le zip, tu envoie directement le fichier "prism.js" dans le dossier du plugin codesample (je te donne pas le chemin car je pense que tu le connais par cœur le dossier des plugins du tinymce)

 

Ensuite, il te faut déclarer dans le Head du zwii le chemin vers le fichier prism.css :

deux façons:

1: Soit en éditant layout.php (dans /core/layout/)

Et tu ajoutes dans le head ceci:

<link rel="stylesheet" href="<?php echo helper::baseUrl(false); ?>core/vendor/tinymce/plugins/codesample/css/prism.css">

Ou soit tu ouvres ta config de ton zwii et tu met le même code qu'au dessus dans "Script du head"

 

IMPORTANT Puis tu fais la même chose pour le fichier  prism.js mais pas au même endroit!!!

1: Soit dans layout.php, juste avant la balise  </body> tu ajoutes:

<script type="text/javascript" src="<?php echo helper::baseUrl(false); ?>core/vendor/tinymce/plugins/codesample/prism.js"></script>

Ou tu va dans la config du site et tu mets le même code du dessus mais cette fois ci dans "Script du body"

 

On pourrait aussi le déclarer directement dans le init.js c'est la troisieme solution

[Fred 1 452]

Prism est déjà déclaré dans inc.json mais étrangement prism.js est absent, pas de dossier js.  
"plugins/codesample/js/prism.fr",
 "plugins/codesample/css/prism.css

[roger 272]

il y a 15 minutes, Fred a dit :

Prism est déjà déclaré dans inc.json mais étrangement prism.js est absent, pas de dossier js.  

Salut Fred;

C'est facile de le placer ce fameux js manquant, c'est la troisième solution que j'ai évoqué au dessus:

Il te suffit d'inclure le prism.js dans le dossier du plugin codesample et de le déclare ainsi dans inc.json

[
	"tinymce.min.js",
	"jquery.tinymce.min.js",
	"init.js",
	"init.css",
	"plugins/codesample/prism.js",
	"plugins/codesample/css/prism.css"
]

Il n'est nul besoin qu'il soit placé dans un dossier js. Tout comme le code dans le inc.jon ""plugins/codesample/js/prism.fr"," chez moi il est supprimé car inutile.

(les version où j'utilise codesample et prism: 10.3.XX & 10.4.XX sans aucuns soucis avec juste ce que j'ai donné comme infos).

 

Modifié il y a 14 heures par roger

[Fred 1 452]

@augras je placerai les fichiers manquants la prochaine version.