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
 
 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *