[Plugin] Codemirror

bazooka07bazooka07 PluXml Lead Developer, Moderator
juillet 2018 modifié dans Plugins
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
rss.pngSuivre 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
«1

Réponses

  • JosJos Member
    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
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
  • 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;}
    
  • Génial, merci pour ce plugin !
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    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++
  • 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.
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    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
  • 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
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    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
  • 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>
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    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.
  • 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 :

    Alors qu'il devrait être de type :
    http://localhost/[REPERTOIRE SITE]/plugins/codemirror/codemirror.js
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    @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.
  • NaBiSsNaBiSs Member
    février 2016 modifié
    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
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    @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
  • C'est top bazooka, merci beaucoup ça fonctionne partout à présent :D .

    /!\ Attention, le lien dans le premier post renvoie vers la 1.36, et pas la 1.40.
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    Non, le lien pointe toujours sur la dernière version du plugin.

    Merci pour le retour.
  • 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
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    Nouvelle version 2.0
    Révision du code
    barre d'état
    codemirror version 5.31.0
    compatible avec tinyMCE 2.xxx.xxx
  • cpalocpalo Member
    novembre 2017 modifié
    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é
  • PHP 5.6
    Mais là j'ai testé en local avec Xampp.
    Je pourrai tester aussi online où j'ai aussi PHP 5.6
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    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.
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    Version 2.0.1
    Correctif pour ceux qui sont encore sous Window$. Les pauvres :(
  • 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'à.....
  • cpalocpalo Member
    novembre 2017 modifié
    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).
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    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 :D
  • 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
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    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, ...
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    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
Connectez-vous ou Inscrivez-vous pour répondre.