Editor kod CSS yang ringkas dan kebanyakannya

Dalam artikel ini, saya akan bercakap tentang cara membuat editor kod berasaskan pelayar yang sangat mudah menggunakan kebanyakannya CSS. Saya pada asalnya membina ini apabila saya perlu membenarkan pengguna mengedit JSON dalam CMS yang saya sedang bina.

Jika anda hanya mahu melompat ke kod dan contoh yang berfungsi, inikan sahaja. Kod boleh didapati di sini dan contoh yang berfungsi di sini

Contenteditable menyebalkan...

Jadi jika anda pernah terfikir untuk membina editor kod anda sendiri, anda mungkin telah melihat contenteditable. Walaupun contenteditable bagus untuk banyak situasi, terdapat satu masalah besar berkaitan dengan mengemas kini kandungan semasa anda menaip. Hampir mustahil untuk meletakkan kursor kembali ke tempatnya selepas anda menyerlahkan sintaks kod dalam editor apabila ia berubah.

Dalam kes saya, saya mahukan sesuatu yang sangat minimum tanpa mencapai perpustakaan yang besar dan berat untuk ini. Saya pergi untuk melihat sama ada saya boleh membina editor yang sangat mudah menggunakan kebanyakannya CSS, hanya menggunakan Javascript untuk mencipta output yang diserlahkan sintaks dan mengemas kini pratonton.

Saya mahu menaip dalam tetapi dan hanya kemas kini pratonton berasingan kod yang diserlahkan sintaks. </p> <h2> Bagaimana ilusi berfungsi </h2> <p><img src="https://img.php.cn/upload/article/000/000/000/173041269277729.jpg" alt="A Simple, mostly CSS code editor"></p> <h2> Kod HTML </h2> <pre class="brush:php;toolbar:false"><div id="editor"> <div class="preview"></div> <textarea class="code" spellcheck="false"></textarea> </div> </pre> <ul> <li>Satu <textarea> dengan teks lutsinar</li> <li>Satu <div> diisi dengan kod yang diserlahkan sintaks anda. </li> <li>Bekas yang membalut <textarea> dan pratonton anda <div> supaya mereka boleh menatal bersama-sama dan kekal berbaris.</li> </ul> <h2> CSS </h2> <p>Berikut ialah keseluruhan CSS yang saya gunakan untuk editor.<br> </p> <pre class="brush:php;toolbar:false">html, body { height: 100vh; width: 100vw; padding: 0; margin: 0; } #editor { height: 100%; width: 100%; box-sizing: border-box; display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; padding: 2rem; background-color: #1a1723; } #editor .code, #editor .preview { all: unset; } #editor .code, #editor .preview { height: auto; grid-column: 1 / 1; grid-row: 1 / 1; font-family: Monaco, monospace; font-size: 16px; resize: none; line-height: 24px; white-space: pre-wrap; overflow: hidden; } #editor .preview { pointer-events: none; color: #ccc; } #editor .code { color: rgba(255, 255, 255, 0); caret-color: magenta; } </pre> <h3> Bertindih elemen </h3> <p>Salah satu bahagian penting di sini ialah menggunakan grid paparan untuk menindih kawasan teks dan pratonton<br> </p> <pre class="brush:php;toolbar:false">#editor { ... display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; ... } </pre> <p>Saya menggunakan unit fr untuk menindih dua elemen di dalam bekas. Anda boleh membaca lebih lanjut tentang fr di CSSTricks di sini.</p> <h3> Mengikat kawasan teks dan pratonton secara sama </h3> <p>Anda mungkin perasan bahawa saya menggunakan peraturan yang sama pada pratonton dan kawasan teks. Ini memastikan ia bertindih dengan tepat.<br> </p> <pre class="brush:php;toolbar:false">#editor .code, #editor .preview { height: auto; grid-column: 1 / 1; grid-row: 1 / 1; font-family: Monaco, monospace; font-size: 16px; resize: none; line-height: 24px; white-space: pre-wrap; overflow: hidden; } </pre> <h3> Jadikan textarea telus </h3> <p>Menggunakan rgba untuk warna teks membolehkan saya mempunyai teks sepenuhnya telus, jadi nampaknya anda sedang memilih dan mengedit pratonton.<br> </p> <pre class="brush:php;toolbar:false">#editor .code { color: rgba(255, 255, 255, 0); caret-color: magenta; } </pre> <h2> Sedikit Javascript </h2> <p>Kami memerlukan sedikit Javascript untuk menggabungkan ini semua. Mari lihat apa yang kita perlukan.<br> </p> <pre class="brush:php;toolbar:false">const $preview = document.querySelector("#editor .preview"); const $code = document.querySelector("#editor .code"); function mirror() { // make textarea grow to height of content so we can scroll together $code.style.height = $code.scrollHeight; // update the preview underlay with the syntax highlight $preview.innerHTML = Prism.highlight( $code.value, Prism.languages.javascript, "javascript", ); } // insert two spaces on tab $code.addEventListener("keydown", (ev) => { if (ev.code === "Tab") { ev.preventDefault(); $code.setRangeText(" ", $code.selectionStart, $code.selectionStart, "end"); mirror(); } }); $code.addEventListener("input", mirror); mirror(); </pre> <blockquote> <p>Kami akan menggunakan Prism untuk ini, tetapi anda boleh menggunakan apa sahaja yang anda suka. </p> </blockquote> <h3> Fungsi mirror() sedang melakukan beberapa perkara di sini. </h3> <pre class="brush:php;toolbar:false"><div id="editor"> <div class="preview"></div> <textarea class="code" spellcheck="false"></textarea> </div> </pre> <p>Ini memastikan bahawa semasa anda menaip, ketinggian <textarea> tumbuh, supaya bekas akan menatal dan bukannya <textarea> sendiri. Anda mungkin pernah melihat ini digunakan untuk membuat kawasan teks "auto-tumbuh" sebelum ini.<br> </p> <pre class="brush:php;toolbar:false">html, body { height: 100vh; width: 100vw; padding: 0; margin: 0; } #editor { height: 100%; width: 100%; box-sizing: border-box; display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; padding: 2rem; background-color: #1a1723; } #editor .code, #editor .preview { all: unset; } #editor .code, #editor .preview { height: auto; grid-column: 1 / 1; grid-row: 1 / 1; font-family: Monaco, monospace; font-size: 16px; resize: none; line-height: 24px; white-space: pre-wrap; overflow: hidden; } #editor .preview { pointer-events: none; color: #ccc; } #editor .code { color: rgba(255, 255, 255, 0); caret-color: magenta; } </pre> <p>Kemudian kami menggunakan Prism untuk mengambil kod daripada <textarea> sintaks menyerlahkannya dan letakkan hasilnya dalam pratonton <div></p> <h3> Menyokong lekukan tab </h3> <p>Bila-bila masa anda mengedit kod, anda perlu boleh mengesot dan kod ini membolehkan kami menambah ruang apabila seseorang menekan tab, dan kemudian panggil mirror() sekali lagi untuk mengemas kini pratonton.<br> </p> <pre class="brush:php;toolbar:false">#editor { ... display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; ... } </pre> <p>Akhir sekali, kami menambah eventListener untuk input pada <textarea> dan kemas kini pratonton dengan mirror() pada setiap perubahan. Kemudian kami memanggil mirror() pada mulanya, sekiranya sudah ada kod dalam <textarea> pada pemuatan halaman. </p> <p>Itu sahaja! Jelas sekali, jika anda sedang mengedit beribu-ribu baris kod, anda mungkin mengalami masalah prestasi semasa mengemas kini semua kod yang diserlahkan sintaks itu. Satu cara untuk menambah baik idea ini ialah dengan mencipta penatal "maya" dan hanya menyerlahkan kod yang boleh dilihat dalam paparan bekas. Ini adalah bagaimana VsCode melakukan editor mereka. </p> <p>Jika anda ingin bermain-main dengan ini, anda boleh mencari<br> kod dan contoh yang berfungsi pada GitHub</p> <p>Atas ialah kandungan terperinci Editor kod CSS yang ringkas dan kebanyakannya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">JavaScript</a> <a href="javascript:void(0);">json</a> <a href="javascript:void(0);">css</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">if</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">while</a> <a href="javascript:void(0);">auto</a> <a href="javascript:void(0);">using</a> <a href="javascript:void(0);">finally</a> <a href="javascript:void(0);">function</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">display</a> <a href="javascript:void(0);">input</a> <a href="javascript:void(0);">github</a> <a href="javascript:void(0);">vscode</a> <a href="javascript:void(0);">idea</a> <a href="javascript:void(0);">cms</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Kenyataan：</span><div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div></div></div><div class="nphpSytBox"><span>Artikel sebelumnya：<a class="dBlack" title="Bagaimana untuk Memaparkan Pilihan Kotak Pilihan pada Tuding Daripada Mengklik?" href="http://m.php.cn/ms/faq/1796660344.html">Bagaimana untuk Memaparkan Pilihan Kotak Pilihan pada Tuding Daripada Mengklik?</a></span><span>Artikel seterusnya：<a class="dBlack" title="Bagaimana untuk Memaparkan Pilihan Kotak Pilihan pada Tuding Daripada Mengklik?" href="http://m.php.cn/ms/faq/1796660376.html">Bagaimana untuk Memaparkan Pilihan Kotak Pilihan pada Tuding Daripada Mengklik?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Artikel berkaitan</h2><em><a href="http://m.php.cn/ms/article.html" class="bBlack"><i>Lihat lagi</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ms/faq/1796661006.html" title="Bagaimanakah saya boleh menggunakan CSS untuk menukar kandungan secara dinamik pada tuding, mencipta pengalaman interaktif untuk pengguna?" class="aBlack">Bagaimanakah saya boleh menggunakan CSS untuk menukar kandungan secara dinamik pada tuding, mencipta pengalaman interaktif untuk pengguna?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/1796661038.html" title="S: Bolehkah saya menukar warna serlahan elemen `` pada tuding dengan CSS?" class="aBlack">S: Bolehkah saya menukar warna serlahan elemen `` pada tuding dengan CSS?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/1796661040.html" title="Bagaimana untuk Mencipta Isian Warna Latar Belakang Kiri-ke-kanan pada Hover Menggunakan CSS?" class="aBlack">Bagaimana untuk Mencipta Isian Warna Latar Belakang Kiri-ke-kanan pada Hover Menggunakan CSS?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/1796661042.html" title="Bagaimanakah mqGenie Boleh Membantu dengan Isu Pertanyaan Media dalam Firefox Apabila Bar Skrol Memberi Impak kepada Lebar Port Pandangan?" class="aBlack">Bagaimanakah mqGenie Boleh Membantu dengan Isu Pertanyaan Media dalam Firefox Apabila Bar Skrol Memberi Impak kepada Lebar Port Pandangan?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/1796661048.html" title="CSS atau HTML: Mana yang Terbaik untuk Menetapkan Saiz Kawasan Teks?" class="aBlack">CSS atau HTML: Mana yang Terbaik untuk Menetapkan Saiz Kawasan Teks?</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ms/"><b class="icon1"></b><p>Rumah</p></a></li><li><a href="http://m.php.cn/ms/course.html"><b class="icon2"></b><p>Kursus</p></a></li><li><a href="http://m.php.cn/ms/wenda.html"><b class="icon4"></b><p>Soal Jawab</p></a></li><li><a href="http://m.php.cn/ms/login"><b class="icon5"></b><p>saya</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ms/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ms/"><b class="icon1"></b><span>Rumah</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/course.html"><b class="icon2"></b><span>Kursus</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/article.html"><b class="icon3"></b><span>Artikel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/wenda.html"><b class="icon4"></b><span>Soal Jawab</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/dic.html"><b class="icon6"></b><span>Kamus</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/xiazai/"><b class="icon8"></b><span>Muat turun</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/faq/zt" title="Topik"><b class="icon12"></b><span>Topik</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ms/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ms/" >Rumah</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/article.html" class="hover">Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/wenda.html" >Soal Jawab</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/course.html" >Kursus</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/faq/zt" >Topik</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/xiazai" >Muat turun</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/game" >Permainan</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/dic.html" >Kamus</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>