[Plugin] Codemirror

bazooka07

Le plugin permet l'utilisation de la bilbiothèque Codemirror.
Editeur de code avec coloration syntaxique, auto-complétion, repli de code (folding)
Permet d'éditer vos modèles, pages statiques et articles sur votre site.
Peut-être utiliser pour la coloration syntaxique si vous publiez du code html, javascript, css, xml, markdown).
Le plugin permet de regrouper les fichiers javascript de la bibliothèque en un seul fichier minifié pour accélérer le téléchargement des pages HTML.

Télécharger la dernière version du plugin
Suivre le flux RSS du dépôt de plugins

09/07/18 - Version 2.1.2 Amélioration pour le raccourci clavier Ctrl-S
23/06/18 - Version 2.1.0 Passage à Codemirror 5.39.0 + hauteur maxi pour édition theme, pages statiques, feuilles CSS plugins
27/11/17 - Version 2.0.5 correction de bugs mineurs + Codemirror version 5.32.0
06/11/17 - Version 2.0.1 Fix against Window$$$$
06/11/17 - Version 2.0 Mise à jour de la librairie de CodeMirror (version 5.31.0) Ajout statusbar - Compatible avec TinyMCE version 2.xxx.xxx
12/03/16 - version 1.41 - hack against PHP 5.4
[del]13/02/16 - version 1.40 - récriture de pluginRoot (Trop de problème avec $_SERVER - aperçu du thème dans le panneau de config - coloration syntaxique pour les feuilles de style des templates et des plugins[/del]
22/01/16 version 1.36 - amélioration des caches CSS pour faciliter l'installation du plugin - correction pour le calcul de la racine du plugin (Il y a un bogue chez LWS) - configuré par défaut pour numérotation des lignes, feuilles de style, templates de thème, utiisation d'une biblio minifiée- testé avec Pluxml 5.4 et 5.5

[del]21/01/16 Version 1.35 [/del]
Mise à jour pour codemirror version 5.11 - fix pour le mode plein écran (touche F11) - chgt icône

26/10/15 - version 1.20
mise à jour pour codemirror version 5.7
ajout de la coloration syntaxique pour les feuilles de styles CSS des plugins
Testé sous Pluxml 5.4

05/04/2014 - version 1.07
Activation du mode PHP

Jos

Bonjour,

Je te remercie pour ta contribution. N'hésite pas, si ce n'est déjà fait, de le rajouter dans la liste des plugins sur le Wiki :
http://wiki.pluxml.org/index.php?page=Plugins+non+officiels

bazooka07

Petite mise à jour pour activer le mode PHP.

Kyodev

bonjour
je viens d'installer pour tester. petit problème d'affichage du textarea chapo avec plxToolbar (qui float). il est ecrasé à droite par la toolbar flottante à gauche.
correction css qui va bien dans /plugins/codemirror/codemirror.css:

[== CSS ==]
.CodeMirror {border: 1px solid black; font-size: 10pt; clear:both;} /* ++ clear */

et pour confort perso:

[== CSS ==]
#toggle_chapo .CodeMirror {height:150px; min-height:100px;}

NaBiSs

Génial, merci pour ce plugin !

bazooka07

Bonjour,

Nouvelle mise à jour avec la version 5.7 de Codemirror
et ajout de la coloration syntaxique des feuilles de styles CSS pour les plugins.

Lien de téléchargement au début du fil de discussion.

A++

NaBiSs

Il semble y avoir un problème avec PHP sur ma version, le code n'est pas colorisé.

Et quand je regarde dans l'aide Codemirror locale à partir du plugin, le PHP n'est pas colorisé non plus.

Je n'ai pas trouvé la source du problème.

bazooka07

Si tu veux qu'on t'aide, il va falloir être plus bavard :
version de PHP, Pluxml, du plugin.
Avec l'inspecteur de Firefox (taper Ctrl-Maj-I), il y a-t-il des messages d'erreurs dans l'onglet console
dans le dossier plugins/codemirror/, le fichier codemirror.min.js est-il présent
dans le panneau de config du plugin, les bonnes cases sont-elles cochées en fonction des utilisateurs

NaBiSs

Désolé pour le manque d'information !

PHP 5.6.20
Installation fraîche PluXML 5.4 (aucune modification)
Plugin Codemirror 1.20

Comment reproduire :
-> Activer uniquement la coloration sur les pages statiques.
-> Écrire un code PHP aléatoire dans l'édition d'une page statique. À priori il n'est pas colorisé.

--> Pas d'erreur dans la console Chrome
--> Plugin bien configuré dans les paramètres
--> code minimifié non utilisé sur mon installation

bazooka07

Mise à jour du plugin Codemirror version 1.35 :
Dernière version stable de la bibliothèque de CodeMirror version 5.11
Correction des feuilles CSS qui empêchaient d'afficher l'édition des pages en plein écran

@Nabiss,
Charge la dernière version du plugin
dans le panneau de config, coches pages statiques et version minifiée de la bibliothèque (incluse dans le plugin)

On peut utiliser également le plugin pour l'édition des feuilles de styles des plugins

NaBiSs

Merci Bazooka !

Par rapport à la correction de la racine du plugin, j'ai un problème en local, il ne m'affiche pas le bon lien vers les fichiers.

Les liens suivants sont générés dans le header:

<script src="/plugins/codemirror/codemirror.min.js" type="text/javascript"></script>
<script src="/plugins/codemirror/codemirror.js" type="text/javascript"></script>

bazooka07

Qu'entends tu par "un problème en local" ?
Les valeurs de src sont correctes. Mettre le hostname est inutile !!!

Dans ton navigateur, mets toi sur une page qui utilise codemirror, clique en dehors de la zone d'édition, et tapes au clavier Ctrl-U por afficher le code source de la page.
Clique sur le lien donné par un des src. Normalement le fichier doit s'ouvrir.

NaBiSs

Voici les balises générées dans le header :

<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
<title>Pijaplast - Administration</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../../core/admin/theme/plucss.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../core/admin/theme/theme.css" media="screen" />
<link rel="icon" href="../../core/admin/theme/images/favicon.png" />
<link rel="stylesheet" type="text/css" href="../../plugins/admin.css" media="screen" />
<script type="text/javascript" src="../../core/lib/functions.js"></script>
<script type="text/javascript" src="../../core/lib/visual.js"></script>
<script src="/plugins/codemirror/codemirror.min.js" type="text/javascript"></script>
<script src="/plugins/codemirror/codemirror.js" type="text/javascript"></script>

Si je clique sur une des deux dernières, j'ai une erreur 404 :

Not Found

The requested URL /plugins/codemirror/codemirror.js was not found on this server.

Ce qui est normal puisque le lien est le suivant :

http://localhost/plugins/codemirror/codemirror.js

Alors qu'il devrait être de type :

http://localhost/[REPERTOIRE SITE]/plugins/codemirror/codemirror.js

bazooka07

@NaBiSs,

En principe, j'utilise les serveurs virtuels de Apache.

Je viens de faire une installation toute neuve dans le dossier de localhost et je n'ai aucun souci particulier.
Voici les conditions de l'installation:
Ubuntu 15.10
document_root de localhost standard: /var/www/html/
installation neuve de Pluxml 5.4 dans /var/ww/html/pluxml-54
Après install, le dossier plugins est renommé kaissahoutils
installation du plugin codemirror version 1.36
Pas d'autres plugins

Et dans le header de la page généré, j'ai bien :

[== HTML ==]
<script src="/pluxml-54/kaissahoutils/codemirror/codemirror.min.js" type="text/javascript"></script>
<script src="/pluxml-54/kaissahoutils/codemirror/codemirror.js" type="text/javascript"></script>

Et codemirror fonctionne avec les articles, pages statiques et fichiers du thème, avec Firefox et Chrome

Donne-moi plus de précision sur ta config.

NaBiSs

C'est bien ce que je pensais, ça vient surement d'un problème de configuration.

En local j'utilise uWamp : http://www.uwamp.com/fr/

Version PHP : 5.4.31

Je vais téléverser mes fichiers sur mon hébergeur pour tester.

EDIT : Fonctionne parfaitement avec mon hébergeur, il s'agit bien d'un problème de config en local.

EDIT2 : Je pense avoir compris une partie du problème. En décortiquant la fonction pluginRoot(), sur Windows la fonction suivante renvoie

[== PHP ==]
echo $_SERVER['DOCUMENT_ROOT'];

C:/wamp/www/

Et dans une page statique, la fonction suivante renvoie

[== PHP ==]
echo dirname(__FILE__);

C:\wamp\www\pijaplastv2\data\statiques

bazooka07

@NaBiSs,

J'ai repris l'écriture de pluginRoot().
L'utilisation de $_SERVER pose trop de problème.
A la place j'utilise $SERVER plus fiable.

J'ai fait des tests avec un userdir sous Nginx qui est le plus compliqué que j'ai trouvé. Pas de souci avec un classique Apache.

Version à télécharger 1.40

NaBiSs

C'est top bazooka, merci beaucoup ça fonctionne partout à présent .

/!\ Attention, le lien dans le premier post renvoie vers la 1.36, et pas la 1.40.

bazooka07

Non, le lien pointe toujours sur la dernière version du plugin.

Merci pour le retour.

cpalo

Bonjour,

J'ai refait une installation sur un PluXml "neuf"
Lorsque je vais la première fois dans la configuration j'obtiens ces messages d'erreur à chacune des catégories de cases à cocher:

[== Indéfini ==]
Notice: Undefined property: codemirror::$default_values in E:\htdocs\sitesDvpts\pluXml-5.5-2016-04-01\plugins\codemirror\config.php on line 34
Warning: array_key_exists() expects parameter 2 to be array, null given in E:\htdocs\sitesDvpts\pluXml-5.5-2016-04-01\plugins\codemirror\config.php on line 34

Ces messages disparaissent si je coche toutes les cases.
Mais je ne vaux pas utiliser codemirror pour la coloration dans le spublications par exemple, je décoche la case et ce message d'erreir réapparait...
Cordialement

bazooka07

Nouvelle version 2.0
Révision du code
barre d'état
codemirror version 5.31.0
compatible avec tinyMCE 2.xxx.xxx

cpalo

J'ai commencé à tester ;
J'ai un message d'erreur après l'installation:

Warning: preg_replace(): Compilation failed: unknown property name after \P or \p at offset 26 in E:\htdocs\mypluXml\plugins\codemirror\codemirror.php on line 73

et dans tinymce c'est simplement le code source de base qui est affiché

bazooka07

Tu as quelle version de PHP ?

cpalo

PHP 5.6
Mais là j'ai testé en local avec Xampp.
Je pourrai tester aussi online où j'ai aussi PHP 5.6

bazooka07

J'ai compris.

Sous Windows, vous utilisez les anti-slashs dans le chemin des fichiers. Alors que sous Linux ce sont des slashes.
Du coup, avec "E:\htdocs\mypluXml\plugins\codemirror\codemirror.php" le \p de plugins est considéré comme une commande dans l'expression régulière.

Heureusement que les serveurs sur Internet qui tournent sous Windows sont une exception.
Faudrait penser à passer sous Linux !!!

Je vais voir pour corriger cela.

bazooka07

Version 2.0.1
Correctif pour ceux qui sont encore sous Window$. Les pauvres

cpalo

Je te rassure j'ai déjà utilisé Linux ..
Et sur mon ordi je peux booter entre deux disques durs .. l'un windows l'autre linux
Et c'est vrai que là j'ai cédé un peu à la facilité...continuer à utiliser ce qu'on a l'habitude d'utiliser (logiciels spécifiques ..)
Pour des raisons économiques j'ai retardé le passage de mon hébergement web sur un serveur semi-dédié Debian..en me contentant d'un mutualisé (donc pas de gestion de serveur)( ce que j'ai fait un peu dans le passé)
Alors quand je vais avoir un peu plus de temps, je vais retester l'installation d'un serveur Debian pour l'hébergement web.( c'est quand meme un peu bête d'avoir un second disque dur bootable dédié à Linux et ne pas s'en servir)
Et en plus mon fils m'a laissé son Rasperry pour que je puisse le bidouiller comme j'en avais envie.
Alors comme on dit souvent y'a plus qu'à.....

cpalo

Petit retour sur la mise à jour.
CodeMirror fonctionne... mais trop bien!!
Aussitôt qu'on édite un article, la page s'affiche immédiatement en plein écran en code source (avec la coloration syntaxique). Mais uniquement le textarea de la page (tout le reste du panneau d'administration y compris les barres de CKEditor n'est plus visible).

bazooka07

J'ai cracké récemment pour un Raspberry Pi 3B avec son boitier ABS chez Gearbest.com pour moins de 30€ franco.
Juste histoire d'installer Alpinelinux dessus :
[list=*]
[*]http://kazimentou.fr/article17/installation-alpinelinux-sur-raspberry-1b-ou-3b[/*]
[*]https://wiki.alpinelinux.org/wiki/Classic_install_or_sys_mode_on_Raspberry_Pi[/*]
[/list]
Par ailleurs, j'ai déjà un Odroid C1 et un Orange Pi PC+ pour faire tourner Debian ou Ubuntu Server, équipés chacun d'une bonne petite carte son pour écouter les web radios sur la chaine hifi.

Je te conseille de passer directement au Raspberry, cela te permettra d'apprendre à travailler avec un serveur à distance via une connection ssh.

Pour CKEditor, désolé je n'ai pas prévu de faire travailler TinyMCE avec.
Faut pas pousser ! Je vais pas booster la concurrence

cpalo

Oups!!!

Aussitôt qu'on édite un article, la page s'affiche immédiatement en plein écran en code source (avec la coloration syntaxique). Mais uniquement le textarea de la page (tout le reste du panneau d'administration y compris les barres de CKEditor n'est plus visible).

Je voulais dire TinyMce (coquille de ma part) car là je suis bien en train de tester la nouvelle version de ton plugin TinyMce.

Pour CKEditor, désolé je n'ai pas prévu de faire travailler TinyMCE avec.

Ce n'était pas ma demande.

Cordialement

bazooka07

Version 2.0.5
Corrige quelques bugs mineurs
Mise à jour avec Codemirror 5.32.0 ( dernière version à ce jour, il y a une mise à jour chaque mois )
Dans le plugin il y a une note pour faire la mise à jour à chaque nouvelle version de Codemirror.
Il faut connaitre Node, Grunt, ...

bazooka07

Version 2.1.0
Mise à jour avec Codemirror-5.39.0
Petite amélioration :
L'édition des fichiers du thème, des pages statiques et des feuilles CSS des plugins se fait avec la hauteur maximum permise par PluXml