Olá a todos os leitores Habr. Neste artigo, continuaremos a escrever nosso editor de código online.
Neste artigo, executaremos a função de salvar o código no localStorage e, atualizando a página, esse código será inserido nesses 3 campos, além de fazer o download desse código como um arquivo.
Alterações de código desde a primeira parte
Na última parte dos comentários, um usuário pediu um atraso antes de reproduzir o código.
Novo 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);
Agora vá para o novo código.
Salvando código no localStorage
Antes do código js, criaremos um botão que, ao clicar, salvará o código
<ul> <li class="save" id="save_code"> </li> </ul>
Agora vamos adicionar um código que enviará dados para localStorage e, em seguida, pegá-lo.
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); }
Funções de cada linha:localStorage.setItem ('htmlSave', htmlSave); - esse código envia código html para localStorage, onde 'htmlSave' é o nome da variável em localStorage e htmlSave é a variável que pega o código do campo (nós o chamamos aqui: var htmlSave = htmlEditor.getValue ();)
localStorage.getItem ("htmlSave") - esse código recupera a variável htmlSave de localStorage.
htmlEditor.session.replace (novo ace.Range (0, 0, 1, 1), htmlSave); - altera o código do campo de substitui-o pelo código de localStorage.
Downloads de código
Agora criaremos uma função que fará o download do código html, css, js como um arquivo, mas antes disso precisamos fazer a marcação 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>
Agora precisamos criar uma função que baixe o arquivo. Para não registrar o mesmo código várias vezes, criaremos uma função e a chamaremos 3 vezes com dados 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); }
Na função de download, especificamos os argumentos que serão chamados para elementos não repetitivos, dos quais:
- clickElm - o elemento no qual clicar.
- variável é uma variável que recebe dados de um campo.
- fileType - tipo de arquivo ao fazer o download
- fileName - nome do arquivo
Agora precisamos chamar a função três vezes para baixar o arquivo html, css e 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");
Isso é tudo.
O editor que podemos fazer é
o Online Code Editor .