Unhosted

Aventures Unhosted

Une traduction approximative du Journal de bord officiel du No Cookie Crew

d’après Unhosted Adventures
by Michiel B. de Jong

2. Un éditeur unhosted

Si vous vous déconnectez de tous les sites Web, et fermez toutes vos applications de bureau, et ouvrez votre navigateur en plein écran, vous ne serez pas en mesure de faire grand-chose. Pour pouvoir réaliser une première base de travail, vous aurez probablement au moins besoin d’un éditeur de texte. C’est donc la première chose que nous allons construire. Et pour cela, nous allons utiliser comme base CodeMirror. Il s’agit d’un éditeur de texte, développé par Marijn Haverbeke, qui s’exécute côté client et qui peut donc facilement être intégré dans les applications Web, qu’elles soient hébergé ou Unhosted. Mais comme il ne nécessite aucun code hébergé, il est particulièrement utile pour une utilisation dans des applications web Unhosted. Le code suivant vous permet d’éditer le javascript, html et markdown directement dans votre navigateur :

<!DOCTYPE html lang="en">
<html>
  <head>
    <meta charset="utf-8">
    <title>codemirror</title>
    <script src="http://codemirror.net/lib/codemirror.js"></script>
    <link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css" />
    <script src="http://codemirror.net/mode/xml/xml.js"></script>
    <script src="http://codemirror.net/mode/javascript/javascript.js"></script>
    <script src="http://codemirror.net/mode/css/css.js"></script>
    <script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
    <script src="http://codemirror.net/mode/markdown/markdown.js"></script>
  </head>
  <body>
    <div id="editor"></div>
    <div>
      <input type="submit" value="js" onclick="myCodeMirror.setOption('mode', 'javascript');">
      <input type="submit" value="html" onclick="myCodeMirror.setOption('mode', 'htmlmixed');">
      <input type="submit" value="markdown" onclick="myCodeMirror.setOption('mode', 'markdown');">
    </div>
  </body>
  <script>
    var myCodeMirror = CodeMirror(
      document.getElementById('editor'),
      { lineNumbers: true }
    );
  </script>
</html>

Fait cocasse, j’ai écrit cet exemple sans le moindre éditeur. Pour cela, j’ai chargé simplement la page example.com dans mon navigateur, ouvert la Console Web et saisi ‘document.body.innerHTML = ‘‘‘

pour effacer l’écran. De cette façon, j’ai pu utiliser la console web du naviagteur pour ajouter du code à la page, et amorcer moi-même mon premier éditeur, code que j’ai ensuite pu enregistrer dans un fichier avec “Enregistrer sous” dans le menu “Fichier”. Une fois cette première instance de CodeMirror créée, j’ai pu commencer à l’utiliser pour saisir du texte, et de là, écrire une version plus évoluée complète de mon éditeur. Mais puisque j’ai déjà effectué cette phase d’amorçage, ne vous forcez pas à la refaire et utilisez tout simplement cette URL. Choisissez markdown ou javascript pour avoir un aperçu des différentes syntaxes de mise en forme. Ajoutez cette URL dans vos marques-pages ou cliquez sur «Enregistrer sous …» à partir du menu “Fichier” de votre navigateur. Vous pourrez alors parcourir votre système de fichiers local en tapant ‘file:///‘

dans la barre d’adresse de votre navigateur, puis en cliquant dans les répertoires jusqu’à trouver le fichier que vous venez d’enregistrer. Pour afficher le code source, une astuce consiste à remplacer la première partie de l’URL des données :

‘data:text/html;charset=utf-8,‘

avec :

‘data:text/plain;charset=utf-8,‘

Vous pouvez aussi vous amusez un peu en ouvrant de nouveau la console web pour accèder à l’éditeur (Ctrl-Maj-K, Cmd-Alt-K, Ctrl-Maj-I, ou Cmd-Alt-I en fonction de votre système d’exploitation et de votre navigateur), et coller la ligne suivante :

myCodeMirror.setValue(decodeURIComponent(location.href .substring('data:text/html;charset=utf-8,'.length)));

l’URL des données est alors décodée et le code de l’éditeur se retrouve chargé en lui-même. Vous pouvez alors modifier votre éditeur. :) Pour charger les mises à jour effectuées, utilisez la commande opposée, qui vous affiche la version nouvellement créée :

location.href = 'data:text/html;charset=utf-8,' + encodeURIComponent(myCodeMirror.getValue());

Essayez, ajoutez un peu de texte en bas du document et exécutez cette deuxième ligne. Ensuite, exécutez à nouveau la première ligne pour afficher l’éditeur fraichement mis-à-jour, avec le code de celui-ci dans sa dernière version (utilisez la flèche du haut pour parcourir l’historique des commandes que vous avez pu saisir dans la console Web). L’étape suivante consiste à ajouter quelques boutons pour faciliter le chargement et la sauvegarde des fichiers que vous éditez depuis et vers le système de fichiers local. Pour cela, nous ajoutons le code suivant dans le corps du document :

<input type="file" onchange="localLoad(this.files);" />
<input type="submit" value="save" 
      onclick="window.open(localSave());">

Et l’on ajoute les fonctions suivantes à la balise de script située à la fin :

//LOCAL
function localSave() {
  return 'data:text/plain;charset=utf-8,'
    + encodeURIComponent(myCodeMirror.getValue());
}
    
function localLoad(files) {
  if(files.length == 1) {
    document.title=escape(files[0].name);
    var reader = new FileReader();
    reader.onload = function(e) {
      myCodeMirror.setValue(e.target.result);
    };
    reader.readAsText(files[0]);
  }
}

Le code “localLoad” est copié à partir MDN; vous devriez également consulter le tutoriel html5rocks, qui décrit le moyen d’ajouter un système de drag-and-drop. Pour ma part, depuis que je n’utilise plus d’applications bureautiques, j’ai pris l’habitude d’utiliser Firefox en plein écran et je n’ai donc plus aucun espace d’ou faire glisser mes fichiers, solution qui est donc inutile dans mon cas…

Le bouton [enregistrer] n’est pas idéal. Il ouvre le code contenu dans l’éditeur dans un nouvel onglet pour que vous puissiez l’enregistrer avec “Enregistrer sous …”, mais le chemin du fichier dans lequel vous avez enregistré ce code pour la dernière fois n’est alors pas pré-rempli dans la boîte de dialogue, et, de plus, il demande vous demande de confirmer si vous voulez vraiment remplacer ce fichier, et, enfin, vous devez fermer cette fenêtre supplémentaire, ce qui signifie que pour sauver un fichier en cours, l’opération prend cinq clics au lieu d’un seul. Mais c’est la meilleure solution que j’ai pu faire fonctionner. La raison pour laquelle j’utilise la méthode window.open() à l’intérieur de l’élément bouton et non pas intégrée dans une fonction comme il est possible de le faire, c’est que les bloqueurs de popups peuvent en bloquer l’ouverture si celle-ci est placé trop profondément dans la pile des appels.

Vous avez sans doute remarqué que ces exemples, qui font appel à des fichiers js et css depuis http://codemirror.net/, ne se chargent pas si vous n’avez pas de connexion réseau. Voici donc le code complet de ce tutoriel, contenant tous les fichiers CodeMirror de la version 2.34: éditeur Unhosted. Ajouter le lien dans vos Marques-pages, ou enregistrer le sur votre système, vous serez toujours en mesure de modifier les fichiers depuis votre navigateur, que ce soit en ligne ou hors ligne. J’utilise cet éditeur pour écrire cet article, et je vais l’utiliser pour écrire toutes les prochaines applications, les scripts et les textes qui paraitront dans les semaines à venir. Un petit conseil en passant, enregistrez une version fonctionnelle à laquelle vous ne toucherez pas, de sorte que si vous cassez votre éditeur au cours d’une modification, vous aurez alors à votre disposition un moyen pour reprendre “l’édition de votre éditeur universel”. :)

C’est tout pour cette semaine. Nous avons créé la première application web Unhosted de cette série d’article, et nous allons l’utiliser comme environnement de développement pour créer toutes les prochaines applications, ainsi que tous les scripts côté serveur des épisodes à venir. J’espère que ça vous a plu. Si vous l’avez fait, alors s’il vous plaît partager le avec vos amis et disciples. L’article de la semaine prochaine abordera la mise en place de votre propre serveur personnel.

Commentaires bienvenus!

Suivant : Configuration de votre serveur personnel