Halo untuk semua pembaca Habr. Pada artikel ini, kami akan terus menulis editor kode online kami.
Pada artikel ini kita akan membuat fungsi menyimpan kode di localStorage, dan dengan memperbarui halaman kode ini akan dimasukkan ke dalam 3 bidang ini, dan kita juga akan membuat fungsi mengunduh kode ini sebagai file.
Perubahan kode dari bagian pertama
Di bagian terakhir dalam komentar, satu pengguna diminta untuk menunda sebelum memainkan kode.
Kode baru: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);
Sekarang lanjutkan ke kode baru.
Menyimpan kode dalam penyimpanan lokal
Sebelum kode js, kita akan membuat tombol yang, dengan mengklik, akan menyimpan kode
<ul> <li class="save" id="save_code"> </li> </ul>
Sekarang kita akan menambahkan kode yang akan mengirim data ke localStorage, dan kemudian mengambilnya.
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); }
Fungsi setiap baris:localStorage.setItem ('htmlSave', htmlSave); - kode ini mengirimkan kode html ke localStorage, di mana 'htmlSave' adalah nama variabel di localStorage, dan htmlSave adalah variabel yang mengambil kode dari bidang (kami menyebutnya di sini: var htmlSave = htmlEditor.getValue ();)
localStorage.getItem ("htmlSave") - kode ini mengambil variabel htmlSave dari localStorage.
htmlEditor.session.replace (ace.Range baru (0, 0, 1, 1), htmlSave); - mengubah kode dari bidang dari menggantinya dengan kode dari localStorage.
Unduhan kode
Sekarang kita akan membuat fungsi yang akan mengunduh kode html, css, js sebagai file, tetapi sebelum itu kita perlu melakukan markup 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>
Sekarang kita perlu membuat fungsi yang akan mengunduh file. Agar tidak mendaftarkan kode yang sama beberapa kali, kami akan membuat satu fungsi dan menyebutnya 3 kali dengan data yang berbeda.
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); }
Dalam fungsi unduhan, kami menentukan argumen yang akan dipanggil untuk elemen yang tidak berulang, di antaranya:
- clickElm - elemen untuk diklik.
- variabel adalah variabel yang mengambil data dari bidang.
- fileType - jenis file saat mengunduh
- fileName - nama file
Sekarang kita perlu memanggil fungsi 3 kali untuk mengunduh file html, css dan 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");
Itu saja.
Editor yang dapat kita lakukan adalah
Editor Kode Online .