Ein einfacher, hauptsächlich CSS-Code-Editor

In diesem Artikel werde ich darüber sprechen, wie man einen sehr einfachen, browserbasierten Code-Editor erstellt, der hauptsächlich CSS verwendet. Ich habe dies ursprünglich erstellt, als ich Benutzern die Bearbeitung von JSON in einem von mir erstellten CMS ermöglichen musste.

Wenn Sie nur zum Code und zum Arbeitsbeispiel springen möchten, sind Sie hier genau richtig. Den Code finden Sie hier und das Arbeitsbeispiel hier

Contenteditable ist scheiße...

Wenn Sie also jemals darüber nachgedacht haben, einen eigenen Code-Editor zu erstellen, haben Sie sich wahrscheinlich contenteditable angesehen. Während Contenteditable für viele Situationen großartig ist, gibt es ein großes Problem bei der Aktualisierung des Inhalts während der Eingabe. Es ist nahezu unmöglich, den Cursor wieder an die Stelle zu setzen, an der er sich befand, nachdem Sie den Code im Editor syntaktisch hervorgehoben haben, während er sich ändert.

In meinem Fall wollte ich etwas sehr Minimales, ohne dafür nach einer riesigen, schwerfälligen Bibliothek zu greifen. Ich machte mich daran, zu sehen, ob ich einen sehr einfachen Editor erstellen könnte, der hauptsächlich CSS verwendet und einfach Javascript verwendet, um die syntaxhervorgehobene Ausgabe zu erstellen und die Vorschau zu aktualisieren.

Ich wollte ein normales aber und aktualisieren Sie einfach eine separate Vorschau des syntaxhervorgehobenen Codes. </p> <h2> Wie die Illusion funktioniert </h2> <p><img src="https://img.php.cn/upload/article/000/000/000/173041269277729.jpg" alt="A Simple, mostly CSS code editor"></p> <h2> Der HTML-Code </h2> <pre class="brush:php;toolbar:false"><div id="editor"> <div class="preview"></div> <textarea class="code" spellcheck="false"></textarea> </div> </pre> <ul> <li>Ein regulärer <textarea> mit transparentem Text</li> <li>Ein <div> gefüllt mit Ihrem syntaxhervorgehobenen Code. </li> <li>Ein Container, der Ihre <textarea> und Ihre Vorschau <div> damit sie zusammen scrollen und in einer Reihe bleiben können.</li> </ul> <h2> Das CSS </h2> <p>Hier ist das gesamte CSS, das ich für den Editor verwendet habe.<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> Überlappung der Elemente </h3> <p>Einer der Schlüsselelemente hier ist die Verwendung des Anzeigerasters zum Überlagern des Textbereichs und der Vorschau<br> </p> <pre class="brush:php;toolbar:false">#editor { ... display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; ... } </pre> <p>Ich verwende die FR-Einheit, um die beiden Elemente im Container zu überlappen. Mehr über fr können Sie hier bei CSSTricks lesen.</p> <h3> Textbereich und Vorschau identisch gestalten </h3> <p>Vielleicht fällt Ihnen auf, dass ich für die Vorschau und den Textbereich dieselben Regeln anwende. Dadurch ist eine exakte Überlappung gewährleistet.<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> Machen Sie den Textbereich transparent </h3> <p>Durch die Verwendung von RGBA für die Textfarbe kann ich den Text völlig transparent machen, sodass es aussieht, als würden Sie die Vorschau auswählen und bearbeiten.<br> </p> <pre class="brush:php;toolbar:false">#editor .code { color: rgba(255, 255, 255, 0); caret-color: magenta; } </pre> <h2> Ein kleines bisschen Javascript </h2> <p>Wir benötigen eine kleine Menge Javascript, um alles zusammenzufassen. Schauen wir uns an, was wir brauchen.<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>Wir werden hierfür Prism verwenden, Sie können aber auch alles verwenden, was Ihnen gefällt. </p> </blockquote> <h3> Die Funktion „mirror()“ führt hier mehrere Dinge aus. </h3> <pre class="brush:php;toolbar:false"><div id="editor"> <div class="preview"></div> <textarea class="code" spellcheck="false"></textarea> </div> </pre> <p>Dadurch wird sichergestellt, dass während der Eingabe die Höhe des <textarea> wächst, sodass der Container anstelle des <textarea> scrollt. selbst. Sie haben wahrscheinlich schon einmal gesehen, dass dies zur Erstellung „automatisch wachsender“ Textbereiche verwendet wird.<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>Dann verwenden wir Prism, um den Code aus der <textarea> Syntax markieren Sie es und platzieren Sie das Ergebnis in der Vorschau <div></p> <h3> Unterstützt Tab-Einrückung </h3> <p>Jedes Mal, wenn Sie Code bearbeiten, müssen Sie in der Lage sein, Einzüge vorzunehmen, und dieser Code ermöglicht es uns, Leerzeichen hinzuzufügen, wenn jemand die Tabulatortaste drückt, und dann Mirror() erneut aufzurufen, um die Vorschau zu aktualisieren.<br> </p> <pre class="brush:php;toolbar:false">#editor { ... display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; ... } </pre> <p>Schließlich fügen wir einen eventListener für die Eingabe im <textarea> hinzu. und aktualisieren Sie die Vorschau bei jeder Änderung mit Mirror(). Dann rufen wir zunächst Mirror() auf, falls bereits Code im <textarea> vorhanden ist. beim Laden der Seite. </p> <p>Das ist es! Wenn Sie Tausende und Abertausende Codezeilen bearbeiten, kann es natürlich zu Leistungsproblemen bei der Aktualisierung des gesamten syntaxhervorgehobenen Codes kommen. Eine Möglichkeit, diese Idee zu verbessern, wäre, einen „virtuellen“ Scroller zu erstellen und nur den Code hervorzuheben, der in der Containeransicht sichtbar ist. So funktioniert der Editor von VsCode. </p> <p>Wenn Sie damit herumspielen möchten, finden Sie das<br> Code und ein funktionierendes Beispiel auf GitHub</p> <p>Das obige ist der detaillierte Inhalt vonEin einfacher, hauptsächlich CSS-Code-Editor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</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>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="Wie werden Auswahlfeldoptionen beim Hover angezeigt, anstatt darauf zu klicken?" href="http://m.php.cn/de/faq/1796660344.html">Wie werden Auswahlfeldoptionen beim Hover angezeigt, anstatt darauf zu klicken?</a></span><span>Nächster Artikel：<a class="dBlack" title="Wie werden Auswahlfeldoptionen beim Hover angezeigt, anstatt darauf zu klicken?" href="http://m.php.cn/de/faq/1796660376.html">Wie werden Auswahlfeldoptionen beim Hover angezeigt, anstatt darauf zu klicken?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</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/de/faq/1796661006.html" title="Wie kann ich CSS verwenden, um Inhalte beim Hover dynamisch zu ändern und so ein interaktives Erlebnis für Benutzer zu schaffen?" class="aBlack">Wie kann ich CSS verwenden, um Inhalte beim Hover dynamisch zu ändern und so ein interaktives Erlebnis für Benutzer zu schaffen?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1796661038.html" title="F: Kann ich die Hervorhebungsfarbe eines „“-Elements beim Hover mit CSS ändern?" class="aBlack">F: Kann ich die Hervorhebungsfarbe eines „“-Elements beim Hover mit CSS ändern?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1796661040.html" title="Wie erstelle ich mit CSS eine Hintergrundfarbfüllung von links nach rechts beim Schweben?" class="aBlack">Wie erstelle ich mit CSS eine Hintergrundfarbfüllung von links nach rechts beim Schweben?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1796661042.html" title="Wie kann mqGenie bei Problemen mit Medienabfragen in Firefox helfen, wenn Bildlaufleisten die Breite des Ansichtsfensters beeinflussen?" class="aBlack">Wie kann mqGenie bei Problemen mit Medienabfragen in Firefox helfen, wenn Bildlaufleisten die Breite des Ansichtsfensters beeinflussen?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1796661048.html" title="CSS oder HTML: Was eignet sich am besten zum Festlegen der Textbereichsgröße?" class="aBlack">CSS oder HTML: Was eignet sich am besten zum Festlegen der Textbereichsgröße?</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/de/"><b class="icon1"></b><p>Heim</p></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><p>Kurs</p></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><p>Fragen und Antworten</p></a></li><li><a href="http://m.php.cn/de/login"><b class="icon5"></b><p>Mein</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/de/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><span>Heim</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><span>Kurs</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/article.html"><b class="icon3"></b><span>Artikel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><span>Fragen und Antworten</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/dic.html"><b class="icon6"></b><span>Wörterbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course/type/99.html"><b class="icon7"></b><span>Handbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/xiazai/"><b class="icon8"></b><span>Herunterladen</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/faq/zt" title="Thema"><b class="icon12"></b><span>Thema</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/de/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/de/" >Heim</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/article.html" class="hover">Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/wenda.html" >Fragen und Antworten</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/course.html" >Kurs</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/faq/zt" >Thema</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/xiazai" >Herunterladen</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/game" >Spiel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/dic.html" >Wörterbuch</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:setlang('ms');" class="language course-right-orders chooselan " 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:;" class="language course-right-orders chooselan chooselanguage" 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>