Halo untuk semua pembaca habr. Pada artikel ini kita akan menulis editor kode online kita.
Mengapa saya menulis editor kode online saya
Suatu hari saya bertanya-tanya betapa sulitnya membuat editor online saya sendiri seperti jsfiddle, itulah sebabnya saya memutuskan untuk menulis editor saya sendiri. Menulis editor saya memberi saya pengetahuan dan konsep javascript yang bagus.
Pemilihan perpustakaan
Memilih perpustakaan adalah bagian penting dari membuat editor kode Anda sendiri. Anda dapat mengelola tanpa perpustakaan, tetapi kemudian editor tidak akan begitu cantik.
Ada dua perpustakaan populer -
Codemirror dan
Ace . Pilihan saya jatuh pada Ace.
Mulai
Hal pertama yang perlu kita lakukan adalah membuat dan menghubungkan kartu as ke file kita.
<!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>
Sekarang kita perlu membuat textarea dan mengatur style untuk itu. Kode ini akan membuat textarea untuk menghasilkan kode 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>
Hal terakhir yang tersisa bagi kita adalah menambahkan kode 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();
Sekarang, ketika kita akan menulis kode html di textarea ini, hasilnya akan ditampilkan dalam iframe.
Fungsi setiap baris:ace.edit (); Seperti document.getElementById, tapi untuk ace.
htmlEditor.setTheme () - mendefinisikan topik bidang (semua topik dapat dilihat di github mereka -
https://github.com/ajaxorg/ace )
htmlEditor.session.setMode () - mendefinisikan bahasa.
htmlEditor.getSession (). on ('change', function () {
// kode
})
- menampilkan kode yang dimasukkan pada iframe.
Mari kita tambahkan 2 bidang lagi, hanya sekarang satu bidang untuk kode css dan satu untuk kode javascript.
Seluruh kode
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();
Ini mengakhiri bagian pertama membuat editor kode Anda sendiri.
Pada bagian kedua, kami akan membuat fungsi menyimpan kode di localStorage dan dengan memperbarui halaman kode ini akan dimasukkan ke dalam 3 bidang ini, dan kami juga akan membuat fungsi mengunduh kode ini sebagai file.
Editor kode yang kami dapatkan