Intégration de CodeMirror dans une application AngularJS

Angular UI Codemirror est une directive AngularJS qui facilite l'intégration de l'éditeur de code CodeMirror au sein d'applications AngularJS. CodeMirror est un éditeur de texte polyvalent conçu spécifiquement pour l'édition de code source, offrant une prise en charge de nombreux langages de programmation ainsi que divers thèmes visuels. Cette directive permet de lier directement les fonctionnalités de CodeMirror au système de data-binding d'AngularJS.

Installation et configuration

Récupération des paquets

L'installation peut s'effectuer via npm ou bower selon votre gestionnaire de dépendances :

npm install angular-ui-codemirror

bower install angular-ui-codemirror

Inclusion des fichiers nécessaires

Plusieurs fichiers doivent être chargés dans votre page HTML : la feuille de styles de CodeMirror, le moteur JavaScript de CodeMirror, la bibliothèque AngularJS ainsi que le module de liaison :

<link rel="stylesheet" href="vendor/codemirror/lib/codemirror.css">
<script src="vendor/codemirror/lib/codemirror.js"></script>
<script src="vendor/angular/angular.min.js"></script>
<script src="vendor/angular-ui-codemirror/dist/ui-codemirror.min.js"></script>

Déclaration du module AngularJS

Ajoutez la dépendance ui.codemirror lors de la création de votre module :

const monApp = angular.module('monApp', ['ui.codemirror']);

Utilisation de la directive

La directive ui-codemirror s'applique sur un élément <textarea> et accepte deux attributs principaux : ng-model pour la liaison de données et ui-codemirror-opts pour les options de configuration :

<textarea ui-codemirror
          ng-model="contenuCode"
          ui-codemirror-opts="configEditeur">
</textarea>

Définition des options dans le contrôleur

monApp.controller('EditeurCtrl', ['$scope', function($scope) {
    $scope.contenuCode = 'function saluer() {\n  return "Bonjour";\n}';
    $scope.configEditeur = {
        lineNumbers: true,
        mode: 'javascript',
        indentUnit: 4,
        tabSize: 4
    };
}]);

Exemple complet d'utilisation

Voici un exemple fonctionnel d'un éditeur de code intégré dans une application AngularJS :


<html ng-app="monApp">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="vendor/codemirror/lib/codemirror.css">
  <script src="vendor/codemirror/lib/codemirror.js"></script>
  <script src="vendor/angular/angular.min.js"></script>
  <script src="vendor/angular-ui-codemirror/dist/ui-codemirror.min.js"></script>
</head>
<body ng-controller="EditeurCtrl">
  <h2>Éditeur de code</h2>
  <textarea ui-codemirror
            ng-model="contenuCode"
            ui-codemirror-opts="configEditeur">
  </textarea>
  {{ contenuCode }}

  <script>
    const monApp = angular.module('monApp', ['ui.codemirror']);
    monApp.controller('EditeurCtrl', ['$scope', function($scope) {
        $scope.contenuCode = 'function saluer() {\n  return "Bonjour";\n}';
        $scope.configEditeur = {
            lineNumbers: true,
            mode: 'javascript',
            indentUnit: 4,
            tabSize: 4
        };
    }]);
  </script>
</body>
</html>

Recommandations

Centralisation de la configuration : Il est conseillé de factoriser les options de CodeMirror dans un service ou une factory AngularJS. Cette approche favorise la réutilisation et simplifie la maintenance lorsque plusieurs éditeurs coexistent dans l'applictaion.

Personnalisation visuelle : CodeMirror propose une variété de thèmes et d'add-ons. Importez les fichiers CSS et JavaScript correspondants pour enrichir l'expérience utilisateur, comme la coloration syntaxique avancée ou l'auto-complétion.

Optimisation des performances : Lors de l'édition de fichiers volumineux, désactivez les fonctionnalités gourmandes en ressources telles que le surlignage de la ligne courante ou les replis de code. Utilisez également la méthode refresh() de l'instance CodeMirror après modification du DOM pour éviter les problèmes d'affichage.

Compatibilité avec l'écosystème

Angular UI Codemirror s'intègre naturellement avec plusieurs composants de l'écosystème AngularJS :

AngularJS : La directive exploite le cycle de digest d'AngularJS pour synchroniser automatiquement le contenu de l'éditeur avec le modèle de données.
CodeMirror : Toutes les fonctionnalités natives de CodeMirror restent accessibles, incluant les modes de syntaxe, les thèmes et les extensions.
Angular UI Router : L'éditeur peut être embarqué dans des vues gérées par UI Router, permettant de construire des environnements de développement en ligne multi-pages.
Angular Material : L'association avec Material Design permet de styliser les éléments environnants pour une cohérence visuelle avec les composants Material.

Étiquettes: angularjs CodeMirror ui-codemirror Directive JavaScript

Publié le 9 juillet à 05h07

L'Atelier Monstre