간단한 CSS 코드 편집기

이 기사에서는 주로 CSS를 사용하여 매우 간단한 브라우저 기반 코드 편집기를 만드는 방법에 대해 이야기하겠습니다. 원래는 제가 구축하고 있던 CMS에서 사용자가 JSON을 편집할 수 있도록 해야 할 때 이것을 구축했습니다.

코드와 실제 예제로 바로 이동하고 싶다면 여기로 가세요. 코드는 여기에서, 실제 예제는 여기에서 찾을 수 있습니다

콘텐츠 편집이 짜증나네요...

따라서 자신만의 코드 편집기를 만드는 것을 고려해 본 적이 있다면 아마도 contenteditable을 살펴보셨을 것입니다. contenteditable은 많은 상황에 적합하지만 입력하는 동안 콘텐츠를 업데이트하는 것과 관련하여 한 가지 큰 문제가 있습니다. 변경된 코드를 편집기에서 구문 강조 표시한 후 커서를 다시 원래 위치로 되돌리는 것은 거의 불가능합니다.

나의 경우에는 거대하고 무거운 라이브러리에 손을 대지 않고 아주 최소한의 것을 원했습니다. 저는 주로 CSS를 사용하고 Javascript를 사용하여 구문 강조 출력을 생성하고 미리보기를 업데이트하는 매우 간단한 편집기를 구축할 수 있는지 알아보기 시작했습니다.

일반 하지만 구문 강조 표시된 코드의 별도 미리보기를 업데이트하면 됩니다. </p> <h2> 환상이 작동하는 방식 </h2> <p><img src="https://img.php.cn/upload/article/000/000/000/173041269277729.jpg" alt="A Simple, mostly CSS code editor"></p> <h2> 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>일반 <textarea> 투명한 텍스트로</li> <li><div> 구문 강조 코드로 채워집니다. </li> <li><textarea>를 감싸는 컨테이너 미리보기 <div> 함께 스크롤하고 줄을 유지할 수 있도록 합니다.</li> </ul> <h2> CSS </h2> <p>편집기에 사용한 CSS 전체입니다.<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> 요소 겹치기 </h3> <p>여기서 핵심 부분 중 하나는 디스플레이 그리드를 사용하여 텍스트 영역과 미리보기를 오버레이하는 것입니다<br> </p> <pre class="brush:php;toolbar:false">#editor { ... display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; ... } </pre> <p>컨테이너 내부의 두 요소를 겹치기 위해 fr 단위를 사용하고 있습니다. 여기 CSSTricks에서 fr에 대한 자세한 내용을 읽을 수 있습니다.</p> <h3> 텍스트 영역과 미리보기를 동일하게 지정 </h3> <p>미리보기와 텍스트 영역에 동일한 규칙을 적용한다는 것을 알 수 있습니다. 이렇게 하면 정확하게 겹쳐집니다.<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> 텍스트 영역을 투명하게 만들기 </h3> <p>텍스트 색상에 rgba를 사용하면 텍스트가 완전히 투명해지기 때문에 미리보기를 선택하고 편집하는 것처럼 보입니다.<br> </p> <pre class="brush:php;toolbar:false">#editor .code { color: rgba(255, 255, 255, 0); caret-color: magenta; } </pre> <h2> 약간의 자바스크립트 </h2> <p>이 모든 것을 하나로 묶으려면 소량의 Javascript가 필요합니다. 무엇이 필요한지 살펴보겠습니다.<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>이를 위해 Prism을 사용할 예정이지만 원하는 것을 사용해도 됩니다. </p> </blockquote> <h3> Mirror() 함수는 여기서 몇 가지 작업을 수행합니다. </h3> <pre class="brush:php;toolbar:false"><div id="editor"> <div class="preview"></div> <textarea class="code" spellcheck="false"></textarea> </div> </pre> <p>이렇게 하면 입력할 때 <textarea> <textarea> 대신 컨테이너가 스크롤됩니다. 그 자체. 아마도 이전에 "자동 확장" 텍스트 영역을 만드는 데 사용된 것을 본 적이 있을 것입니다.<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>그런 다음 Prism을 사용하여 <textarea> 구문을 강조 표시하고 결과를 미리 보기 <div></p>에 배치합니다. <h3> 탭 들여쓰기 지원 </h3> <p>코드를 편집할 때마다 들여쓰기가 가능해야 하며, 이 코드를 사용하면 누군가 탭을 눌렀을 때 공백을 추가한 다음 mirror()를 다시 호출하여 미리보기를 업데이트할 수 있습니다.<br> </p> <pre class="brush:php;toolbar:false">#editor { ... display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; ... } </pre> <p>마지막으로 <textarea>에 입력을 위한 eventListener를 추가합니다. 각 변경사항에 대해 mirror()를 사용하여 미리보기를 업데이트합니다. 그런 다음 <textarea>에 이미 코드가 있는 경우 처음에는 mirror()를 호출합니다. 페이지 로드 시. </p> <p>그렇습니다! 분명히 수천 줄의 코드를 편집하는 경우 모든 구문 강조 코드를 업데이트하면 성능 문제가 발생할 수 있습니다. 이 아이디어를 개선하는 한 가지 방법은 "가상" 스크롤러를 만들고 컨테이너 보기에 표시되는 코드만 강조 표시하는 것입니다. 이것이 VsCode가 편집기를 수행하는 방식입니다. </p> <p>이것을 가지고 놀고 싶다면 <br> GitHub의 코드 및 실제 예제</p> <p>위 내용은 간단한 CSS 코드 편집기의 상세 내용입니다. 자세한 내용은 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>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="클릭하는 대신 마우스 오버 시 선택 상자 옵션을 표시하는 방법은 무엇입니까?" href="https://m.php.cn/ko/faq/1796660344.html">클릭하는 대신 마우스 오버 시 선택 상자 옵션을 표시하는 방법은 무엇입니까?</a></span><span>다음 기사：<a class="dBlack" title="클릭하는 대신 마우스 오버 시 선택 상자 옵션을 표시하는 방법은 무엇입니까?" href="https://m.php.cn/ko/faq/1796660376.html">클릭하는 대신 마우스 오버 시 선택 상자 옵션을 표시하는 방법은 무엇입니까?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="https://m.php.cn/ko/article.html" class="bBlack"><i>더보기</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="https://m.php.cn/ko/faq/841.html" title="CSS 작성 시 Border에 대해 주의해야 할 사항 요약" class="aBlack">CSS 작성 시 Border에 대해 주의해야 할 사항 요약</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/961.html" title="다중 스타일 선택 및 스타일 실시간 전환 구현 방법_경험 교환" class="aBlack">다중 스타일 선택 및 스타일 실시간 전환 구현 방법_경험 교환</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1345.html" title="Marquee의 상세한 사용 분석" class="aBlack">Marquee의 상세한 사용 분석</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/269082.html" title="CSS标题线（删除线贯穿线效果）实现" class="aBlack">CSS标题线（删除线贯穿线效果）实现</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/269606.html" title="CSS3中优雅降级和渐进增强的区别" class="aBlack">CSS3中优雅降级和渐进增强的区别</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><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p></div><div class="footermid"><a href="https://m.php.cn/ko/about/us.html">회사 소개</a><a href="https://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="https://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><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>