Un nouvel éditeur HTML sur la JED

[lomart]

Bonjour,

Je viens de tester CodeMirror plus Emmet, une toute nouvelle extension sur la JED.
Il s'agit d'un éditeur de code qui permet d'écrire du code HTML sous une forme abrégé (Emmet, anciennement ZenCoding).
Exemple, vous écrivez :

.row>.span4{Bloc-$$$}*3

puis après un appui sur la touche TAB, vous avez ceci :

<div class="row">
  <div class="span4">Bloc-001</div>
  <div class="span4">Bloc-002</div>
  <div class="span4">Bloc-003</div>
</div>

ou plus simplement
h1 suivi de TAB écrit <h1></h1> avec le curseur entre les 2 balises pour saisir le contenu.
img suivi de TAB écrit <img src="" alt="">

Il offre également des raccourcis très pratiques pour contrôler l'appairage de balises (Ctrl-D et Maj-Ctrl-D).
Je vous laisse découvrir les autres raccourcis sur cette page

Je pense que je vais abandonner RokPad pour ce nouvel éditeur

[lomart]

Re : Un nouvel éditeur HTML sur la JED

Bonjour,

Je viens de traduire et compléter le fichier d'aide qui est disponible par un bouton aide dans l'éditeur.
J'ai également modifié les raccourcis pour correspondre à un clavier azerty.
Il suffit de remplacer le fichier \plugins\editors\emmet\js\help.html par le fichier dans le zip joint.

[toffffe]

Re : Un nouvel éditeur HTML sur la JED

Salut Lomart
Merci pour ton retour et ta traduction, à tester

[lomart]

Re : Un nouvel éditeur HTML sur la JED

J'ai un petit souci avec la hauteur de la zone d'édition que j'ai résolu en créant une règle CSS admin:
.CodeMirror { height: 95%; }

Pour éviter de le refaire à chaque mise à jour de Joomla, j'ai crée cette règle dans un fichier /administrator/templates/isis/custom.css qui est appelé par customCSS (http://lomart.fr/telecharger.html)

[lomart]

Re : Un nouvel éditeur HTML sur la JED

Une fonctionnalité non indiquée mais pourtant bien pratique : l'indentation du code

Il suffit de sélectionner les lignes à formater puis de taper TAB ou MAJ+TAB pour refaire l'indentation.

Plus je l'utilise, plus je l'apprécie ...

Le fichier d'aide mis à jour: help.zip
Il suffit de remplacer le fichier \plugins\editors\emmet\js\help.html par le fichier du zip.