Hola a todos los lectores de Habr. En este artículo, continuaremos escribiendo nuestro editor de código en línea.
En este artículo, haremos la función de guardar el código en localStorage y, al actualizar la página, este código se insertará en estos 3 campos, y también haremos la función de descargar este código como un archivo.
El código cambia desde la primera parte
En la última parte de los comentarios, un usuario solicitó retrasar antes de reproducir el código.
Nuevo código: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);
Ahora proceda al nuevo código.
Guardar código en localStorage
Antes del código js, crearemos un botón que, al hacer clic, guardará el código
<ul> <li class="save" id="save_code"> </li> </ul>
Ahora agregaremos un código que enviará datos a localStorage y luego lo tomaremos.
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); }
Funciones de cada línea:localStorage.setItem ('htmlSave', htmlSave); - este código envía código html a localStorage, donde 'htmlSave' es el nombre de la variable en localStorage, y htmlSave es la variable que toma el código del campo (lo llamamos aquí: var htmlSave = htmlEditor.getValue ();)
localStorage.getItem ("htmlSave") : este código recupera la variable htmlSave de localStorage.
htmlEditor.session.replace (nuevo as.Range (0, 0, 1, 1), htmlSave); - cambia el código del campo de lo reemplaza con el código de localStorage.
Descargas de código
Ahora crearemos una función que descargará el código html, css, js como un archivo, pero antes de eso debemos hacer el marcado 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>
Ahora necesitamos hacer una función que descargue el archivo. Para no registrar el mismo código varias veces, haremos una función y la llamaremos 3 veces con datos diferentes.
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); }
En la función de descarga, especificamos los argumentos que se llamarán para elementos no repetidos, de los cuales:
- clickElm: el elemento en el que hacer clic.
- La variable es una variable que toma datos de un campo.
- fileType: tipo de archivo al descargar
- fileName - nombre de archivo
Ahora necesitamos llamar a la función 3 veces para descargar el archivo html, css y 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");
Eso es todo
El editor que podemos hacer es
el editor de código en línea .