Cuisine et Web

Voici le code d'un petit éditeur en ligne simpliste qui permet de télecharger le code que vous ecrivez

Cet éditeur n'est qu'une base et n'a aucune fonctionalité autre que d'interpréter le HTML et CSS ecrit et de télécharger ceux-ci dans le corps d'un fichier au format HTML.

C'est le BLOB qui se chargera de vous envoyez ce fichier qui n'existera qu'une fois enregistrer sur votre machine.N'ayez aucune inquiétude, ce BLOB n'est pas vivant et n'est pas non plus un virus informatique.

Si ce petit editeur est interessant, passé le temps de vos premiers tests, créations et sauvegarde, il va s'averer vite peu productif, limité et incapable de classer quoique ce soit, c'est pourquoi Vous trouverez aussi ici une multitude de liens vers des editeur en lignes, pour certains de qualités professionnelles et pour de nombreux langages: html, CSS, JavaScript, regex, PHP, react native, Angular, Vue.js, etc.

Vous trouverez cet éditeur dans l'un de mes codepen

Pour créer ce blob, il suffit généralement de partir de 2 variables, l'une pour créer ce blob et l'autre pour ce que l'on va mettre dedans.

  var code = 'code en texte';
  var blob = new Blob([code], {
    type: "text/html" // declaration du mime type / type de fichier Ici un fichier HTMl au format texte
  });

Pour la visualisation du code, on recupere le contenu de nos 3 textareas que l'on ajoute dans un squelette de page HTML. le code de cette page est ensuite injecter dans l'attribut data d'une balise object pour la visualiser (nous pourrions aussi nous servir d'une balise iframe). Cette page est construite à la volée et est stockée dans la variable html. C'est cette variable qui est envoyé dans l'objet blob pour la télecharger en tant que fichier HTML.

Pour voir les codes complet de ce petit éditeur, cliquez sur les onglets du Widget :HTML, CSS et JS. L'onglet JS est probablement celui qui vous interessera le plus, son code est connecté au HTML , Le CSS ne sert qu'a la mise en page et n'a aucune incidence sur le fonctionnement du script.

See the Pen basic live coder + Save & download file by gc-nomade (@gc-nomade) on CodePen.

Cet editeur se sert d'une WEB API permettant de regrouper les données en texte des differents <textarea> dans le corps d'un texte d'un document HTML, pour enfin l'envoyer au navigateur comme s'il s'agissait d'un fichier HTML. Vous trouverez la définition du BLOB informatique ici!.

Des éditeurs en ligne à profusions.

Aujourd'hui , le WEB regorge d'éditeur en lignes pour des tas de langages et avec de multiples fonctionnalités.

En voici une liste non exhaustive, qui peuvent tous utiliser des ressources externes comme Bootstrap, fontawesome,react,... plus ou moins facile à prendre en main et permettant de sauvegarder en ligne vos créations. La plupart requiert un enregistrement gratuit.

Il y en a bien sur d'autres, n'hesitez pas à commenter ci-dessous pour allonger ou réduire cette liste.