Bonjour à tous les lecteurs Habr. Dans cet article, nous continuerons d'écrire notre éditeur de code en ligne.
Dans cet article, nous ferons la fonction de sauvegarder le code dans localStorage et en mettant à jour la page ce code sera inséré dans ces 3 champs, et nous ferons également la fonction de télécharger ce code sous forme de fichier.
Modifications du code depuis la première partie
Dans la dernière partie des commentaires, un utilisateur a demandé à attendre avant de lire le code.
Nouveau code:var htmlEditor = ace.edit("html-editor"); htmlEditor.setTheme("ace/theme/monokai"); htmlEditor.session.setMode("ace/mode/html"); var cssEditor = ace.edit("css-editor"); cssEditor.setTheme("ace/theme/monokai"); cssEditor.session.setMode("ace/mode/css"); var jsEditor = ace.edit("js-editor"); jsEditor.setTheme("ace/theme/monokai"); jsEditor.session.setMode("ace/mode/javascript"); function playCode() { htmlEditor.getSession().on('change', function() { update(); }) cssEditor.getSession().on('change', function() { update(); }) jsEditor.getSession().on('change', function() { update(); }) function update() { var res = document.getElementById('result').contentWindow.document; res.open(); res.write('<style>' + cssEditor.getValue() + '</style>'); res.write('<script>' + jsEditor.getValue() + '</script>'); res.write(htmlEditor.getValue()); res.close(); } } setTimeout(playCode, 2000);
Passez maintenant au nouveau code.
Enregistrement de code dans localStorage
Avant le code js, nous allons créer un bouton qui, en cliquant, enregistrera le code
<ul> <li class="save" id="save_code"> </li> </ul>
Maintenant, nous allons ajouter un code qui enverra des données à localStorage, puis les prendrons.
var saveBtn = document.getElementById('save_code'); saveBtn.addEventListener("click", () => { var htmlSave = htmlEditor.getValue(); var cssSave = cssEditor.getValue(); var jsSave = jsEditor.getValue(); localStorage.setItem('htmlSave', htmlSave); localStorage.setItem('cssSave', cssSave); localStorage.setItem('jsSave', jsSave); alert(' !'); }); window.onload = () => { var htmlSave = (localStorage.getItem("htmlSave")); var cssSave = (localStorage.getItem("cssSave")); var jsSave = (localStorage.getItem("jsSave")); htmlEditor.session.replace(new ace.Range(0, 0, 1, 1), htmlSave); cssEditor.session.replace(new ace.Range(0, 0, 1, 1), cssSave); jsEditor.session.replace(new ace.Range(0, 0, 1, 1), jsSave); }
Fonctions de chaque ligne:localStorage.setItem ('htmlSave', htmlSave); - ce code envoie du code html à localStorage, où 'htmlSave' est le nom de la variable dans localStorage, et htmlSave est la variable qui prend le code du champ (nous l'avons appelé ici: var htmlSave = htmlEditor.getValue ();))
localStorage.getItem ("htmlSave") - ce code récupère la variable htmlSave de localStorage.
htmlEditor.session.replace (nouveau ace.Range (0, 0, 1, 1), htmlSave); - change le code du champ de le remplace par le code de localStorage.
Téléchargements de code
Nous allons maintenant créer une fonction qui téléchargera le code html, css, js sous forme de fichier, mais avant cela, nous devons faire le balisage html.
<ul> <li id="save_code"> </li> <li id="download_html"> Html </li> <li id="download_css"> Css </li> <li id="download_js"> Js </li> </li> </ul>
Maintenant, nous devons créer une fonction qui téléchargera le fichier. Afin de ne pas enregistrer plusieurs fois le même code, nous allons créer une fonction et l'appeler 3 fois avec des données différentes.
var htmlDownload = document.getElementById('download_html'); var cssDownload = document.getElementById('download_css'); var jsDownload = document.getElementById('download_js'); function download(clickElm, variable, fileType, fileName) { this.clickElm = clickElm; this.variable = variable; this.fileType = fileType; this.fileName = fileName; clickElm.addEventListener("click", () => { var code = ace.edit(variable); var textToWrite = code.getValue(); var textFileAsBlob = new Blob([textToWrite], {type:fileType}); var fileNameToSaveAs = fileName; var downloadLink = document.createElement("a"); downloadLink.download = fileNameToSaveAs; downloadLink.innerHTML = "Download File"; if (window.webkitURL != null) { downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob); } else { downloadLink.href = window.URL.createObjectURL(textFileAsBlob); downloadLink.onclick = destroyClickedElement; document.body.appendChild(downloadLink); } downloadLink.click(); }); } function destroyClickedElement(event) { document.body.removeChild(event.target); }
Dans la fonction de téléchargement, nous avons spécifié les arguments qui seront appelés pour les éléments non répétitifs, dont:
- clickElm - l'élément sur lequel cliquer.
- variable est une variable qui prend des données d'un champ.
- fileType - type de fichier lors du téléchargement
- fileName - nom de fichier
Maintenant, nous devons appeler la fonction 3 fois pour télécharger le fichier html, css et js.
download(htmlDownload, "html-editor", "text/plain", "index.html"); download(cssDownload, "css-editor", "text/plain", "style.css"); download(jsDownload, "js-editor", "text/js", "app.js");
C’est tout.
L'éditeur que nous pouvons faire est
l'éditeur de code en ligne .