Éditeur CodeMirror

orx57 · mai 2010

Edit : Mise-à-jour pour PluXml 5.1 beta 1, voir ci-dessous !

Bonjour,

J'essaie de créer un simple plugin CodeMirror pour PluXml. Je rencontre un tout petit soucis, et je viens vous en faire part ici. Tout d'abord, c'est quoi CodeMirror :

CodeMirror est une éditeur non-wysiwyg en javascript. Entre autre, on peut citer comme fonctionnalité : la coloration syntaxique, l'affichage de la correspondance des balises ouvrantes/fermantes, la validation syntaxique du code, l'auto-indentation, la numérotation des lignes, etc...

Cet outil me semble en adéquation avec PluXml (et sa philosophie), puisque les champs de contenu accueillent du code (XHTML, CSS, PHP, JS, etc...) et qu'il est simple et léger. En tout cas pour moi, c'est largement plus utile et suffisant que CKEditor et les autres éditeurs wysiwyg.

Alors parlons de ce plugin, rien de bien sorcier... je suis partie de la petite partie de code de Stéphane pour son plugin CKEditor. Pour le moment, l'éditeur n'est actif que pour les textarea de la page de modification des pages statiques.

1. Télécharger le plugin CodeMirror v0.67
2. Éditer le fichier core/admin/prepend.php et ajouter tout à la fin du fichier la ligne suivante

<?php include(PLX_ROOT.'plugins/codemirror/plx.codemirror.php') ?>

3. Éditer le fichier core/admin/foot.php et au dessus de la ligne </body>, ajouter

<?php codemirror(); ?>

Vous pouvez maintenant allez éditer une page statique pour voir ce que ça donne. Mon bout de code doit gérer le code PHP, XHTML, JavaScript et CSS.

Mon petit problème, je n'arrive pas comprendre pourquoi la pluxtoolbar ne joue plus son rôle d'ajout des balises dans le textarea... Si quelqu'un à une idée ?!

Site officiel :
+ CodeMirror

Merci et @+

orx57 · mai 2010

Snif... visiblement ça n'intéresse pas grand monde !

J'espère qu'il n'en sera pas de même pour mes plugins plx.distcache (une sorte de cache distant) et plx.identi.ca (pour afficher des timelines identi.ca)...

@+

Frédéric · mai 2010

Hum je ne le considère pas comme éditeur qui ajoute des balises dans le textearea, mais plus comme un éditeur de code.

Donc on peux difficilement faire le rapport avec un éditeur wysiwyg.

Pour info il existe déjà une solution dans le wiki avec Edite_Area

orx57 · mai 2010

@Fred : Merci, j'étais passé à côté de Edite_Area sur le wiki... le titre ne m'avais pas interpellé par rapport à ses fonctionnalités. Je vais le tester et y jeter un coup d'œil pour essayer de comprendre le soucis que je rencontre avec CodeMirror et la pluxtoolbar.

Mais si quelqu'un à une idée ou une piste...

@+

orx57 · janvier 2011

Bonjour à tous,

Voici une adaptation de mon plugin pour PluXml 5.1 beta 1.

J'y ai mis à jour CodeMirror en v0.93 et y ai ajouté Zen Coding v0.7.
Je rencontre toujours une incompatibilité avec la plxToolbar comme décrit plus haut...

+ Plugin plxZenCodeMirror - Version 0.9 (29/01/2011)

@+

Stéphane · janvier 2011

Bonjour orx57

Je teste ça tout de suite ;-)

Stéphane · janvier 2011

Alors voilà mes remarques.

De mon coté j'ai aussi fait un plugin pour codemirror

Je n'ai pas mis la ligne ci dessous, pour éviter des indentations parasites

reindentOnLoad: true,

En revanche j'ai ajouté la ligne suivante, qui permet d'activer la touche tab et de pouvoir faire des tabulations

tabMode: 'spaces',

Sinon coté du code du plugin, c'est parfait. Rien à dire

J'ai le même souci de compatibilité avec la plxtoolbar

orx57 · janvier 2011

Merci Stéphane pour ce retour !

La touche tab sert ici à Zen Coding. Si tu ne connais pas, tape par exemple ça :

ul.nav>li.nav-item$*4>a

et puis tab...

@+

Stéphane · janvier 2011

Ha oui

Je ne connaissais pas.

Stéphane · janvier 2011

Bon je viens de regarder rapidement comment était fait codemirror.

Si le coeur t'en dit voila de quoi faire une barre d'outil compatible avec code mirror.

Ici cela ne fait qu'on bouton pour ajouter dans le textarea les balises <strong>, </strong>, en tenant compte éventuellement du texte sélectionné pour le mettre en gras

<script type="text/javascript">
			
			function MirrorFrame(place, options) {
				this.home = document.createElement("div");
				if (place.appendChild)
					place.appendChild(this.home);
				else
					place(this.home);

				var self = this;
				function makeButton(name, action) {
					var button = document.createElement("input");
					button.type = "button";
					button.value = name;
					self.home.appendChild(button);
					button.onclick = function(){self[action].call(self);};
				}
				makeButton("Bold", "bold");
				this.mirror = new CodeMirror(this.home, options);
			}

			MirrorFrame.prototype = {
				bold: function() {
					this.mirror.replaceSelection('<strong>'+this.mirror.selection()+'</strong>');
				},
			};
			
			var editor = new MirrorFrame(CodeMirror.replace('id_content'), {
                    height: "350px",
                    parserfile: ["parsexml.js", "parsecss.js", "tokenizejavascript.js", "parsejavascript.js",
                        "tokenizephp.js", "parsephp.js",
                        "parsephphtmlmixed.js"],
                    stylesheet: ["../../plugins/plxcodemirror/css/xmlcolors.css", "../../plugins/plxcodemirror/css/jscolors.css", "../../plugins/plxcodemirror/css/csscolors.css", "../../plugins/plxcodemirror/css/phpcolors.css"],
                    path: "../../plugins/plxcodemirror/js/",
                    continuousScanning: 500,

                    lineNumbers: true,
                    indentUnit: 4,
                    reindentOnLoad: true,
					
                    // add Zen Coding support
                    syntax: 'html',
                    onLoad: function(editor) {
                        zen_editor.bind(editor);
                    }
					
                });
            </script>

Stéphane · janvier 2011

Voilà une solution qui semble marcher

d'abord une petite modif du fichier .js de la plxtoolbar (fichier plugins/plxtoolbar/plxtoolbar.js)

En dessous de la ligne :

var p = document.createElement('p');

ajoute la ligne

p.id = 'plxtoolbar_'+textarea;

Apres pour le plugin codemirror

<script type="text/javascript">
	
				var editor = CodeMirror.fromTextArea('id_content', {
                    height: "350px",
                    parserfile: ["parsexml.js", "parsecss.js", "tokenizejavascript.js", "parsejavascript.js",
                        "tokenizephp.js", "parsephp.js",
                        "parsephphtmlmixed.js"],
                    stylesheet: ["../../plugins/plxcodemirror/css/xmlcolors.css", "../../plugins/plxcodemirror/css/jscolors.css", "../../plugins/plxcodemirror/css/csscolors.css", "../../plugins/plxcodemirror/css/phpcolors.css"],
                    path: "../../plugins/plxcodemirror/js/",
                    continuousScanning: 500,
                    lineNumbers: true,
                    indentUnit: 4,
                    reindentOnLoad: true,
                    // add Zen Coding support
                    syntax: 'html',
					
                    onLoad: function(editor) {
                        zen_editor.bind(editor);
						var obj = document.getElementById('plxtoolbar_content');
						obj.innerHTML = '';
						this.makeButton('Bold', 'bold');
						this.makeButton('H2', 'h2');
                    },
					
					makeButton: function(name, action) {
						var button = document.createElement("input");
						button.type = "button";
						button.setAttribute("class",action);
						button.setAttribute("className",action); /* Hack IE */
						var self = this;
						button.onclick = function(){self[action].call(self);};
						var obj = document.getElementById('plxtoolbar_content');
						obj.insertBefore(button);
					},
					
					bold: function() {
						editor.replaceSelection('<strong>'+editor.selection()+'</strong>');
					},
					h2: function() {
						editor.replaceSelection('<h2>'+editor.selection()+'</h2>');
					},			
					
                });
				
            </script>

cela demande de rédéfinir chaque bouton, mais ça fonctionne

orx57 · janvier 2011

Ah un grand merci Stéphane pour cette recherche et cette solution.
Je vais m'atteler à ça !

@+

Stéphane · janvier 2011

La solution est à peaufinée. c'est juste une piste

orx57 · janvier 2011

Oui, je l'avais bien pris comme tel

Encore merci.

@+

orx57 · février 2011

Bonjour à tous,

Toute petite mise à jour : plxZenCodeMirror 0.9.1 (05/02/2011).

Avec principalement l'ajout d'une page de configuration pour activer ou désactiver Zen Coding, et donc utiliser la touche TAB soit pour l'indentation avec CodeMirror ou pour le « déploiement » de l'expression pour Zen Coding.

@+

Wiksa · mars 2011

Le plugin n'est plus téléchargeable, le lien est mort !

orx57 · mars 2011

Bonjour Wiksa,

Tout fonctionne chez moi. C'est la seconde fois qu'on me fait part de ce problème (cf. [plugin] Google Analytics). Je vais essayer d'analyser et de trouver la source de ce problème avec les informations que j'ai... je penche toujours pour un problème DNS, mais ne vois pas ce qui cloche... En tout cas, désolé pour les inconvénients (je n'ai pas d'autres endroits personnels pour le mettre à disposition...) et merci beaucoup de m'en avoir fait part !

@+

orx57 · mars 2011

Bonsoir,

@Wiksa : Votre FAI ne serait-il pas SFR ? J'étais ce soir même chez quelqu'un qui a une connexion Internet SFR, et je n'arrivais pas à accéder à mes sous-domaines...

@+

Wiksa · mars 2011

Non, mon FAI c'est free.
Maintenant j'arrive à accéder au site, le problème semble résolu.

Johan · avril 2011

Je viens de découvrir ce plugin et je ne peux que dire merci...
Avoir ZenCoding directement dans mon CMS c'est du bonheur...

Juste pour savoir, est-il possible de modifier les CSS de code mirror parce que sur Safari/Mac le bandeau qui compte les lignes n'est pas vraiment précis... Ou alors est-il possible de supprimer le bandeau et d'avoir le look and feel classique de la page d'édition ?

En tout cas merci pour le plugin !

PS : CodeMirror est sortie en version 2 plus légère... I'm just saying

orx57 · avril 2011

Bonsoir Johan,

Tout d'abord merci pour ton commentaire et tes encouragements

J'ai pris tout en compte... et je publie donc aujourd'hui une nouvelle version :
plxZenCodeMirror 0.9.2 (07/04/2011).

J'y ai mis à jour CodeMirror en version 1.0. Le passage en version 2.0 demandera un peu plus d'adaptation, mais je travail déjà dessus.

J'ai ajouté la possibilité d'activer ou désactiver la numérotation des lignes ainsi que l'indentation au chargement (cf. remarque de Stéphane plus haut). L'activation de la numérotation des lignes fait apparaître un champ qui te permet de personnaliser la classe CSS CodeMirror-line-numbers pour modifier le bandeau qui compte les lignes.

Le code utilisé par défaut pour cette classe est le suivant :

width: 2.2em;
color: #aaa;
background-color: #eee;
text-align: right;
padding-right: .3em;
font-size: 10pt;
font-family: monospace;
padding-top: .4em;
line-height: normal;

Tu peux modifier celui-ci à ta convenance.

Encore merci et @+

Éditeur CodeMirror

Réponses