अपने jsfiddle बनाना, भाग 2

सभी हब्बर पाठक को मेरा नमस्कार। इस लेख में, हम अपने ऑनलाइन कोड संपादक को लिखना जारी रखेंगे।

इस लेख में, हम लोकलस्टोरेज में कोड को सहेजने का कार्य करेंगे और पेज को अपडेट करके इन 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); 

अब नए कोड पर आगे बढ़ें।

लोकलस्टोरेज में सेविंग कोड

Js कोड से पहले, हम एक बटन बनाएंगे, जिस पर क्लिक करके, कोड को सेव करेगा

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

अब हम एक कोड जोड़ेंगे जो लोकलस्टोरेज को डेटा भेजेगा और फिर इसे लेगा।

 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 कोड भेजता है, जहां 'htmlSave' स्थानीयस्टोरेज में चर का नाम है, और HTMLSave वह चर है जो क्षेत्र से कोड लेता है (हमने इसे यहां कहा: var htmlSave = htmlEditor.getValue ();)

localStorage.getItem ("htmlSave") - यह कोड localStorage से htmlSave चर को पुनः प्राप्त करता है।

htmlEditor.session.replace (नया ऐस.रेंज (0, 0, 1, 1), htmlSave); - फ़ील्ड के कोड को लोकलस्टोरेज के कोड से बदल देता है।

कोड डाउनलोड

अब हम एक फंक्शन बनाएंगे जो एक फाइल के रूप में html, css, js कोड को डाउनलोड करेगा, लेकिन इससे पहले हमें htmlup करना होगा।

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

डाउनलोड फ़ंक्शन में, हमने उन तर्कों को निर्दिष्ट किया, जिन्हें गैर-दोहराए जाने वाले तत्वों के लिए बुलाया जाएगा, जिनमें से:

• clickElm - पर क्लिक करने वाला तत्व।
  
• वेरिएबल एक वैरिएबल है जो किसी क्षेत्र का डेटा लेता है।
  
• fileType - डाउनलोड करते समय फ़ाइल प्रकार
  
• fileName - फ़ाइल नाम
  

अब हमें html, css और js फ़ाइल डाउनलोड करने के लिए फ़ंक्शन को 3 बार कॉल करना होगा।

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

वह सब है।

संपादक जो हम कर सकते हैं वह ऑनलाइन कोड संपादक है ।