Question : Comment ajouter de la coloration syntaxique à un champ de type textarea

Niveau : Programmation (noyau et extensions)

Réponse :

BDF embarque la bibliothèque Javascript CodeMirror (codemirror.net/) pour effectuer la coloration syntaxique des fichiers textes. Les fichiers constituant cette bibliothèque sont accessibles via les ressources dans third-lib/codemirror. Outre les modes proposés par CodeMirror, cinq modes spécifiques à la syntaxe du logiciel BDF ont été codés. Pour des questions de mises à jour, ces modes sont séparés de la bibliothèque CodeMirror et se trouvent dans js/codemirror :

  • bdf_attributes.js : coloration syntaxique des attributs

  • bdf_keys.js : coloration syntaxique des listes de clés (comme dans l’ordre des éléments d’un corpus)

  • bdf_section.js : coloration syntaxique des champs de section de texte

  • bdf_subsettree : coloration syntaxique de l’ordre des collections

  • bdf_tableexport.js : coloration syntaxique de l’exportation tabulaire

Pour associer de manière automatique un champ de texte à de la coloration syntaxique, il faut charger le fichier Javascript js/bdf/codemirrormode.js. Celui-ci répère les éléments <textarea> qui possède un attribut data-codemirror-mode et applique la valeur de cet attribut comme mode de CodeMirror. Il faut bien sûr charger par ailleurs CodeMirror et le mode en question.

Lorsque la page est produite en Java par une classe étendant BdfHtmlProducer, il suffit d’ajouter au moment de la construction la bibliothèque Javascript suivante :

addJsLib(CommonJsLibs.CODEMIRRORMODE);

Cette bibliothèque charge les modes suivants :

  • xml : XML

  • htmlmixed : HTML

  • css : CSS

  • javascript : Javascript

  • properties : propriétés, fichiers .ini

  • bdf_attributes : formatage des attributs

  • bdf_keys : formatage des listes de clés

  • bdf_section : formatage des sections de texte

  • bdf_subsettree : formatage des l’ordre des collections

  • bdf_tableexport : formatage de l’exportation tabulaire