🔥 🐝 🐹 अपना jsfiddle बनाना, भाग 1 🎵 🚍 ⚓️

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

मैंने अपना ऑनलाइन कोड संपादक क्यों लिखा?

एक दिन मैंने सोचा कि jsfiddle जैसे अपने ऑनलाइन संपादक को बनाना कितना मुश्किल है, यही वजह है कि मैंने अपना खुद का संपादक लिखने का फैसला किया। मेरे संपादक लिखने से मुझे जावास्क्रिप्ट का अच्छा ज्ञान और अवधारणाएँ मिलीं।

पुस्तकालय चयन

एक पुस्तकालय का चयन अपने कोड संपादक बनाने का एक महत्वपूर्ण हिस्सा है। आप एक पुस्तकालय के बिना प्रबंधन कर सकते हैं, लेकिन फिर संपादक इतना सुंदर नहीं होगा।

दो लोकप्रिय पुस्तकालय हैं - कोडमिरर और ऐस । मेरी पसंद ऐस पर गिर गई।

शुरुआत

पहली चीज जो हमें करने की ज़रूरत है वह है इक्का और हमारी फ़ाइल से कनेक्ट करना।

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>  </title> <link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://rawgithub.com/ajaxorg/ace-builds/master/src/ext-language_tools.js" type="text/javascript" charset="utf-8"></script> <script src="https://rawgithub.com/ajaxorg/ace-builds/master/src/ace.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js"></script> <meta name="viewport" content="width=device-width, initial=scale=1"> </head>

अब हमें इसके लिए बनावट और सेट स्टाइल बनाने की जरूरत है। यह कोड आउटपुट HTML कोड के लिए textarea बनाएगा।

 <style type="text/css" media="screen"> #html-editor{ min-height: 40vh; width: 35%; } #result { background-color: white; width: 100%; height: 50vh; } </style> <div id="html-editor"></div> <div id="result-block"> <iframe id="result" frameborder="0"></iframe> </div> <br>

आखिरी चीज जो हमारे लिए बनी हुई है वह है js कोड जोड़ना।

  var htmlEditor = ace.edit("html-editor"); htmlEditor.setTheme("ace/theme/monokai"); htmlEditor.session.setMode("ace/mode/html"); htmlEditor.getSession().on('change', function() { update(); }) function update() { var res = document.getElementById('result').contentWindow.document; res.open(); res.write(htmlEditor.getValue()); res.close(); } update();

अब, जब हम इस textarea में html कोड लिखेंगे, तो परिणाम एक iframe में प्रदर्शित होगा।

प्रत्येक पंक्ति के कार्य:

ace.edit (); Document.getElementById की तरह है, लेकिन इक्का के लिए।
htmlEditor.setTheme () - क्षेत्र के विषय को परिभाषित करता है (सभी विषय उनके github पर देखे जा सकते हैं - https://github.com/ajaxorg/ace )
htmlEditor.session.setMode () - भाषा को परिभाषित करता है।
htmlEditor.getSession ()। ('परिवर्तन', फंक्शन () {
// कोड
})
- एक iframe पर दर्ज कोड प्रदर्शित करता है।

आइए 2 और ऐसे फ़ील्ड्स जोड़ते हैं, अब केवल एक फ़ील्ड css कोड के लिए और एक जावास्क्रिप्ट कोड के लिए।

पूरा कोड

index.php

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>  </title> <link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://rawgithub.com/ajaxorg/ace-builds/master/src/ext-language_tools.js" type="text/javascript" charset="utf-8"></script> <script src="https://rawgithub.com/ajaxorg/ace-builds/master/src/ace.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js"></script> <meta name="viewport" content="width=device-width, initial=scale=1"> </head> <body> <style type="text/css" media="screen"> #html-editor, #css-editor, #js-editor { min-height: 40vh; width: 35%; } #result { background-color: white; width: 100%; height: 50vh; } .all_editors { display: flex; } </style> <div class="all_editors"> <div id="html-editor"></div> <div id="css-editor"></div> <div id="js-editor"></div> </div> <div id="result-block"> <iframe id="result" frameborder="0"></iframe> </div>

app.js

  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"); 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(); } update();

यह आपके स्वयं के कोड संपादक बनाने के पहले भाग को समाप्त करता है।

दूसरे भाग में, हम लोकलस्टोरेज में कोड को सेव करने का कार्य करेंगे और पेज को अपडेट करके इन 3 फ़ील्ड्स में कोड डाला जाएगा, और हम इस कोड को फाइल के रूप में डाउनलोड करने का कार्य भी करेंगे।

कोड एडिटर जो हमें मिलता है

अपना jsfiddle बनाना, भाग 1

मैंने अपना ऑनलाइन कोड संपादक क्यों लिखा?

पुस्तकालय चयन

शुरुआत

पूरा कोड

More articles: