Erstellen Sie Ihre jsfiddle, Teil 2

Hallo an alle Habr-Leser. In diesem Artikel werden wir weiterhin unseren Online-Code-Editor schreiben.

In diesem Artikel übernehmen wir die Funktion zum Speichern des Codes in localStorage. Durch Aktualisieren der Seite wird dieser Code in diese drei Felder eingefügt. Außerdem wird der Code als Datei heruntergeladen.

Codeänderungen ab dem ersten Teil

Im letzten Teil der Kommentare bat ein Benutzer um eine Verzögerung, bevor der Code abgespielt wurde.

Neuer 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); 

Fahren Sie nun mit dem neuen Code fort.

Speichern von Code in localStorage

Vor dem js-Code erstellen wir eine Schaltfläche, die durch Klicken auf den Code speichert

 <ul> <li class="save" id="save_code"> </li> </ul> 

Jetzt fügen wir einen Code hinzu, der Daten an localStorage sendet, und nehmen ihn dann auf.

 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); } 

Funktionen jeder Zeile:

localStorage.setItem ('htmlSave', htmlSave); - Dieser Code sendet HTML-Code an localStorage, wobei 'htmlSave' der Name der Variablen in localStorage ist und htmlSave die Variable ist, die den Code aus dem Feld entnimmt (wir haben ihn hier genannt: var htmlSave = htmlEditor.getValue ();)

localStorage.getItem ("htmlSave") - Dieser Code ruft die Variable htmlSave von localStorage ab.

htmlEditor.session.replace (neues ace.Range (0, 0, 1, 1), htmlSave); - Ändert den Code aus dem Feld von ersetzt ihn durch den Code von localStorage.

Code-Downloads

Jetzt werden wir eine Funktion erstellen, die den HTML-, CSS-, JS-Code als Datei herunterlädt, aber vorher müssen wir das HTML-Markup ausführen.

 <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> 

Jetzt müssen wir eine Funktion erstellen, die die Datei herunterlädt. Um denselben Code nicht mehrmals zu registrieren, erstellen wir eine Funktion und rufen sie dreimal mit unterschiedlichen Daten auf.

  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); } 

In der Download-Funktion haben wir die Argumente angegeben, die für sich nicht wiederholende Elemente aufgerufen werden, von denen:

• clickElm - das Element, auf das geklickt werden soll.
  
• Variable ist eine Variable, die Daten aus einem Feld entnimmt.
  
• fileType - Dateityp beim Herunterladen
  
• Dateiname - Dateiname
  

Jetzt müssen wir die Funktion dreimal aufrufen, um die HTML-, CSS- und JS-Datei herunterzuladen.

 download(htmlDownload, "html-editor", "text/plain", "index.html"); download(cssDownload, "css-editor", "text/plain", "style.css"); download(jsDownload, "js-editor", "text/js", "app.js"); 

Das ist alles.

Der Editor, den wir ausführen können, ist der Online-Code-Editor .