Ajouter le plugin CodeMirror à l’éditeur de texte TinyMCE

Ce plugin gratuit permet d’éditer le code des contenus affichés pas TinyMCE, de nombreux langages sont supportés. Il remplace avantageusement le plugin Code de TinyMCE tout à fait limité, dont la version Advanced est payante.

Ce tutoriel a été testé avec succès sur le CMS Zwii en prévision de la sortie imminente de la version 9.

Etape 1 : Récupérer CodeMirror

Cela se passe sur le Git officiel ce qui permet de télécharger la version la plus fraîche.

https://github.com/christiaan/tinymce-codemirror

puis décompactez et naviguez jusque dans le dossier plugins

2019-01-25_14h06_24

Pas de problème, le français fait bien partie des langues proposées.

Etape 2 :

Renommez le dossier codemirror-4.n en codemirror

Etape 3 :

Copiez le premier dossier codemirror celui qui contient les dossiers codemirror et langs (ainsi que 2 fichiers JS) dans le dossier plugins de TinyMCE

image

Etape 4 :

Configuration de TinyMCE.

Editez le fichier configuration tinymce.inc.js et dans la section plugins remplacez code par codemirror.

image

Pour le paramétrage, on peut partir de cette configuration à coller dans le même fichier :

image

Etape 5 :

Sauvegardez le fichier et rechargez la page web avec l’éditeur.

Pour fignoler, j’ai de mon coté amélioré la traduction française qui ne me convenait pas (fichier fr_FR.js dans le dossier langs) :

image
 
 
Publicités