Un éditeur de code simple, principalement CSS

Dans cet article, je vais expliquer comment créer un éditeur de code très simple basé sur un navigateur et utilisant principalement du CSS. À l'origine, je l'ai construit lorsque j'avais besoin de permettre aux utilisateurs de modifier JSON dans un CMS que je construisais.

Si vous souhaitez simplement passer au code et à l'exemple fonctionnel, c'est parti. Le code peut être trouvé ici et l'exemple fonctionnel ici

Contenteditable, c'est nul...

Donc, si vous avez déjà pensé à créer votre propre éditeur de code, vous avez probablement consulté contenteditable. Bien que contenteditable soit idéal dans de nombreuses situations, il existe un énorme problème concernant la mise à jour du contenu pendant que vous tapez. Il est presque impossible de replacer le curseur là où il se trouvait après avoir mis en évidence la syntaxe du code dans l'éditeur au fur et à mesure qu'il change.

Dans mon cas, je voulais quelque chose de très minimal sans avoir recours à une bibliothèque énorme et lourde pour cela. J'ai décidé de voir si je pouvais créer un éditeur très simple utilisant principalement du CSS, en utilisant simplement Javascript pour créer la sortie en surbrillance de la syntaxe et mettre à jour l'aperçu.

Je voulais taper un texte mais et mettez simplement à jour un aperçu séparé du code en surbrillance de la syntaxe. </p> <h2> Comment fonctionne l'illusion </h2> <p><img src="https://img.php.cn/upload/article/000/000/000/173041269277729.jpg" alt="A Simple, mostly CSS code editor"></p> <h2> Le code 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>Un <textarea> avec texte transparent</li> <li>Un <div> rempli avec votre code en surbrillance de syntaxe. </li> <li>Un conteneur enveloppant votre <textarea> et votre aperçu <div> afin qu'ils puissent défiler ensemble et rester alignés.</li> </ul> <h2> Le CSS </h2> <p>Voici l'intégralité du CSS que j'ai utilisé pour l'éditeur.<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> Superposition des éléments </h3> <p>L'un des éléments clés ici consiste à utiliser la grille d'affichage pour superposer la zone de texte et l'aperçu<br> </p> <pre class="brush:php;toolbar:false">#editor { ... display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; ... } </pre> <p>J'utilise l'unité fr pour superposer les deux éléments à l'intérieur du conteneur. Vous pouvez en savoir plus sur fr sur CSSTricks ici.</p> <h3> Stylage de la zone de texte et aperçu à l'identique </h3> <p>Vous remarquerez peut-être que j'applique les mêmes règles à l'aperçu et à la zone de texte. Cela garantit qu'ils se chevauchent avec précision.<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> Rendre la zone de texte transparente </h3> <p>Utiliser rgba pour la couleur du texte me permet d'avoir le texte entièrement transparent, il semble donc que vous sélectionniez et modifiiez l'aperçu.<br> </p> <pre class="brush:php;toolbar:false">#editor .code { color: rgba(255, 255, 255, 0); caret-color: magenta; } </pre> <h2> Un peu de Javascript </h2> <p>Nous avons besoin d'une petite quantité de Javascript pour relier tout cela ensemble. Jetons un coup d'œil à ce dont nous avons besoin.<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>Nous utiliserons Prism pour cela, mais vous pouvez utiliser tout ce que vous voulez. </p> </blockquote> <h3> La fonction miroir() fait plusieurs choses ici. </h3> <pre class="brush:php;toolbar:false"><div id="editor"> <div class="preview"></div> <textarea class="code" spellcheck="false"></textarea> </div> </pre> <p>Cela garantit que lorsque vous tapez, la hauteur du champ <textarea> grandit, de sorte que le conteneur défile au lieu du <textarea> lui-même. Vous avez probablement déjà vu cela utilisé pour créer des zones de texte « à croissance automatique ».<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>Ensuite, nous utilisons Prism pour récupérer le code de la zone <textarea> syntaxe, mettez-le en surbrillance et placez le résultat dans l'aperçu <div></p> <h3> Prise en charge de l'indentation des onglets </h3> <p>Chaque fois que vous modifiez du code, vous devez pouvoir mettre en retrait, et ce morceau de code nous permet d'ajouter des espaces lorsque quelqu'un clique sur la tabulation, puis d'appeler à nouveau miroir() pour mettre à jour l'aperçu.<br> </p> <pre class="brush:php;toolbar:false">#editor { ... display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; ... } </pre> <p>Enfin, nous ajoutons un eventListener pour la saisie sur le <textarea> et mettez à jour l'aperçu avec miroir() à chaque modification. Ensuite, nous appelons initialement mirror(), au cas où il y aurait déjà du code dans la zone <textarea> au chargement de la page. </p> <p>C'est ça ! Évidemment, si vous éditiez des milliers et des milliers de lignes de code, vous pourriez rencontrer des problèmes de performances lors de la mise à jour de tout le code mis en surbrillance par la syntaxe. Une façon d'améliorer cette idée serait de créer un scroller "virtuel" et de mettre en évidence uniquement le code visible dans la vue des conteneurs. C'est ainsi que VsCode fait son éditeur. </p> <p>Si vous souhaitez jouer avec ça, vous pouvez trouver le<br> code et un exemple fonctionnel sur GitHub</p> <p>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!</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>Déclaration：</span><div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="Comment afficher les options de la zone de sélection en survolant au lieu de cliquer ?" href="http://m.php.cn/fr/faq/1796660344.html">Comment afficher les options de la zone de sélection en survolant au lieu de cliquer ?</a></span><span>Article suivant：<a class="dBlack" title="Comment afficher les options de la zone de sélection en survolant au lieu de cliquer ?" href="http://m.php.cn/fr/faq/1796660376.html">Comment afficher les options de la zone de sélection en survolant au lieu de cliquer ?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="http://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</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/fr/faq/1796661006.html" title="Comment puis-je utiliser CSS pour modifier dynamiquement le contenu lors du survol, créant ainsi une expérience interactive pour les utilisateurs ?" class="aBlack">Comment puis-je utiliser CSS pour modifier dynamiquement le contenu lors du survol, créant ainsi une expérience interactive pour les utilisateurs ?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/1796661038.html" title="Q : Puis-je changer la couleur de surbrillance d'un élément `` au survol avec CSS ?" class="aBlack">Q : Puis-je changer la couleur de surbrillance d'un élément `` au survol avec CSS ?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/1796661040.html" title="Comment créer un remplissage de couleur d'arrière-plan de gauche à droite en survol à l'aide de CSS ?" class="aBlack">Comment créer un remplissage de couleur d'arrière-plan de gauche à droite en survol à l'aide de CSS ?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/1796661042.html" title="Comment mqGenie peut-il résoudre les problèmes de requête multimédia dans Firefox lorsque les barres de défilement ont un impact sur la largeur de la fenêtre ?" class="aBlack">Comment mqGenie peut-il résoudre les problèmes de requête multimédia dans Firefox lorsque les barres de défilement ont un impact sur la largeur de la fenêtre ?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/1796661048.html" title="CSS ou HTML : quel est le meilleur moyen de définir la taille de la zone de texte ?" class="aBlack">CSS ou HTML : quel est le meilleur moyen de définir la taille de la zone de texte ?</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/fr/"><b class="icon1"></b><p>Maison</p></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><p>Cours</p></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><p>Questions et réponses</p></a></li><li><a href="http://m.php.cn/fr/login"><b class="icon5"></b><p>Mon</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/fr/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/fr/"><b class="icon1"></b><span>Maison</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><span>Cours</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><span>Questions et réponses</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/dic.html"><b class="icon6"></b><span>Dictionnaire</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course/type/99.html"><b class="icon7"></b><span>Manuel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/xiazai/"><b class="icon8"></b><span>Télécharger</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/faq/zt" title="Sujet"><b class="icon12"></b><span>Sujet</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/fr/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/fr/" >Maison</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/wenda.html" >Questions et réponses</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/course.html" >Cours</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/faq/zt" >Sujet</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/xiazai" >Télécharger</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/game" >Jeu</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/dic.html" >Dictionnaire</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:;" class="language course-right-orders chooselan chooselanguage" 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>