مرحبا لجميع القارئ هابر. في هذه المقالة سوف نكتب محرر الشفرة عبر الإنترنت.
لماذا كتبت محرر الشفرة على الإنترنت
في أحد الأيام تساءلت عن مدى صعوبة إنشاء محرر خاص بي على الإنترنت مثل jsfiddle ، ولهذا قررت أن أكتب محرري الخاص. كتابة لي المحرر أعطاني معرفة جيدة ومفاهيم جافا سكريبت.
اختيار المكتبة
يعد اختيار المكتبة جزءًا مهمًا من إنشاء محرر الشفرة الخاص بك. يمكنك إدارة بدون مكتبة ، ولكن بعد ذلك لن يكون المحرر جميلًا.
هناك نوعان من المكتبات الشعبية -
Codemirror و
Ace . سقط خياري على الآس.
ابدأ
أول شيء يتعين علينا القيام به هو إنشاء ملف ace وتوصيله.
<!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>
الآن نحن بحاجة إلى إنشاء textarea وتعيين أنماط لذلك. هذا الكود سوف ينشئ textarea لإخراج كود html.
<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();
الآن ، عندما نكتب كود html في هذا النص ، سيتم عرض النتيجة في iframe.
وظائف كل سطر:ace.edit ()؛ يشبه document.getElementById ، لكن من أجل ace.
htmlEditor.setTheme () - يحدد موضوع الحقل (يمكن عرض جميع المواضيع على جيثبهم -
https://github.com/ajaxorg/ace )
htmlEditor.session.setMode () - يحدد اللغة.
htmlEditor.getSession (). on ('تغيير' ، دالة () {
// الرمز
})
- يعرض الكود الذي تم إدخاله على iframe.
دعنا نضيف حقلين إضافيين ، الآن فقط حقل واحد لرمز css وواحد لرمز javascript.
كود كامل
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();
هذا ينتهي الجزء الأول من إنشاء محرر الكود الخاص بك.
في الجزء الثاني ، سنجعل وظيفة حفظ الكود في localStorage ومن خلال تحديث الصفحة سيتم إدراج هذا الكود في هذه الحقول الثلاثة ، وسنقوم أيضًا بتنزيل هذه الكود كملف.
محرر الكود الذي نحصل عليه