Journal
Suivez l’actualité de Fairytree
Éditez facilement vos éléments MODx avec EditArea et Zen Coding
Par défaut, l'édition des éléments dans MODx (modèles, chunks) n'est pas particulièrement intuitive: une simple zone de texte en noir sur blanc, sans coloration ni auto-complétion du code. Heureusement, le plugin EditArea permet d'améliorer grandement la facilité d'édition. Et avec le support de Zen Coding, vous allez pouvoir ajouter des blocs de codes HTML en utilisant des raccourcis prédéfinis. Voyons comment configurer tout cela dans votre installation de MODx Evolution.
Installation du plugin EditArea
Téléchargez tous d'abord l'add-on sur le site officiel de MODx: http://modxcms.com/extras/package/514
L'installation est très simple car basée sur l'interface d'installation de MODx Evolution. Une fois les fichiers transférés par FTP sur votre serveur, il vous faudra simplement pointer votre navigateur sur www.votresite.com/install et suivre les étapes d'installation.
Zen Coding, c'est quoi ?
Zen Coding est un ensemble d'outils permettant de générer automatiquement du code HTML en utilisant les sélecteurs CSS. Par exemple, vous entrez dans votre page div#header+div#content.main suivi d'un raccourci propre à votre système d'exploitation (ctrl , sous MacOS) et vous obtenez le code HTML correspondant:
<div id="header"> </div> <div id="content" class="main"> </div>
Pratique, non ? Il existe également un ensemble de codes prêts à l'emploi vous permettant de générer des balises spécifiques ou la structure complète d'une page HTML. Par exemple, le code link:css créera automatiquement un lien vers une feuille de style:
<link rel="stylesheet" type="text/css" href="style.css" media="all">
Intégration de Zen Coding dans EditArea
Téléchargez tout d'abord le plugin Zen Coding pour EditArea à cette adresse: http://zen-coding.ru/demo/, décompressez l'archive et envoyez le dossier obtenu dans le répertoire des plugins d'EditArea: /assets/plugins/edit_area/core/edit_area/plugins/.
Pour activer la prise en charge du plugin, connectez-vous à votre gestionnaire MODx, allez dans l'onglet de configuration du plugin EditArea et ajoutez «zencoding» dans le champ «Active Plugins».
Si vous avez bien suivi toutes les étapes, vous devriez maintenant avoir accès à l'éditeur EditArea dans l'édition de vos éléments, ainsi que la possibilité d'utiliser Zen Coding pour rédiger votre code.