所有Habr读者您好。 在本文中，我们将继续编写在线代码编辑器。
在本文中，我们将实现将代码保存在localStorage中的功能，并且通过更新页面，此代码将被插入这3个字段中，并且还将具有将该代码下载为文件的功能。
代码从第一部分更改
在注释的最后部分，一个用户要求延迟播放代码。
新代码：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);
现在继续执行新代码。
将代码保存在localStorage中
在js代码之前，我们将创建一个按钮，通过单击该按钮将保存代码
<ul> <li class="save" id="save_code"> </li> </ul>
现在，我们将添加一个将数据发送到localStorage的代码，然后将其接收。
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); }
每行的功能：localStorage.setItem（'htmlSave'，htmlSave）; -此代码将html代码发送到localStorage，其中“ htmlSave”是localStorage中变量的名称，而htmlSave是从字段中获取代码的变量（我们在此处称为：var htmlSave = htmlEditor.getValue（）;）
localStorage.getItem（“ htmlSave”） -此代码从localStorage检索htmlSave变量。
htmlEditor.session.replace（新的ace.Range（0，0，1，1），htmlSave）； -更改字段中的代码，将其替换为localStorage中的代码。
代码下载
现在，我们将创建一个函数，该函数会将html，css，js代码下载为文件，但是在此之前，我们需要进行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>
现在我们需要制作一个可以下载文件的函数。 为了避免多次注册相同的代码，我们将创建一个函数，并使用不同的数据调用3次。
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); }
在download函数中，我们指定了将为非重复元素调用的参数，其中：
- clickElm-要单击的元素。
- 变量是从字段中获取数据的变量。
- fileType-下载时的文件类型
- fileName-文件名
现在我们需要调用该函数3次以下载html，css和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");
仅此而已。
我们可以做的编辑器是
Online Code Editor 。