إنشاء jsfiddle الخاص بك ، الجزء 2

مرحباً بكل قارئ هبر. في هذه المقالة ، سنستمر في كتابة محرر الشفرة عبر الإنترنت.

في هذه المقالة ، سنجعل وظيفة حفظ الكود في localStorage وعن طريق تحديث الصفحة سيتم إدراج هذا الكود في هذه الحقول الثلاثة ، وسنقوم أيضًا بتنزيل هذه الكود كملف.

يتغير الرمز من الجزء الأول

في الجزء الأخير من التعليقات ، طلب أحد المستخدمين التأخير قبل تشغيل الكود.

كود جديد:

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") - يسترجع هذا الرمز المتغير htmlSave من localStorage.

htmlEditor.session.replace (new 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); } 

في وظيفة التنزيل ، حددنا الوسائط التي سيتم استدعاؤها للعناصر غير المتكررة ، والتي:

• clickElm - العنصر للنقر فوق.
  
• المتغير هو متغير يأخذ البيانات من حقل.
  
• fileType - نوع الملف عند التنزيل
  
• اسم الملف - اسم الملف
  

نحتاج الآن إلى استدعاء الوظيفة 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"); 

هذا كل شيء.

المحرر الذي يمكننا القيام به هو محرر الشفرة عبر الإنترنت .