在本文中，我將討論如何使用主要使用 CSS 來(lái)製作一個(gè)非常簡(jiǎn)單的、基於瀏覽器的程式碼編輯器。我最初建立這個(gè)是當(dāng)我需要讓使用者在我正在建立的 CMS 中編輯 JSON 時(shí)。

如果您只想跳到程式碼和工作範(fàn)例，就在這裡。程式碼可以在這裡找到，工作範(fàn)例可以在這裡

內(nèi)容可編輯太爛了...

因此，如果您曾經(jīng)考慮過(guò)建立自己的程式碼編輯器，那麼您可能已經(jīng)看過(guò) contenteditable。雖然 contenteditable 在許多情況下都非常有用，但在您鍵入時(shí)更新內(nèi)容方面存在一個(gè)巨大的問(wèn)題。當(dāng)編輯器中的程式碼發(fā)生變化時(shí)，在語(yǔ)法高亮顯示程式碼後，幾乎不可能將遊標(biāo)放回原來(lái)的位置。

就我而言，我想要一些非常小的東西，而不需要一些巨大的、笨重的庫(kù)。我開(kāi)始考慮是否可以建立一個(gè)主要使用 CSS 的非常簡(jiǎn)單的編輯器，僅使用 Javascript 建立語(yǔ)法突出顯示的輸出，並更新預(yù)覽。

我想輸入一個(gè)普通的 但只是更新語(yǔ)法突出顯示程式碼的單獨(dú)預(yù)覽。

幻覺(jué)是如何運(yùn)作的

HTML 程式碼

<div id="editor">
  <div class="preview"></div>
  <textarea class="code" spellcheck="false"></textarea>
</div>

• 常規(guī)的 帶有透明文字
• A
  ;填滿(mǎn)了語(yǔ)法突出顯示的程式碼。
• 一個(gè)包裹你的 的容器和您的預(yù)覽 <div>;這樣他們就可以一起滾動(dòng)並保持排隊(duì)。 <h2> CSS </h2> <p>這是我用來(lái)編輯器的整個(gè) 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>這裡的關(guān)鍵部分之一是使用顯示網(wǎng)格來(lái)覆蓋文字區(qū)域和預(yù)覽<br> </p> <pre class="brush:php;toolbar:false">#editor { ... display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; ... } </pre> <p>我使用 fr 單元來(lái)重疊容器內(nèi)的兩個(gè)元素。您可以在 CSSTricks 上閱讀有關(guān) fr 的更多資訊。 </p> <h3> 將文字區(qū)域和預(yù)覽設(shè)定為相同 </h3> <p>您可能會(huì)注意到我對(duì)預(yù)覽和文字區(qū)域應(yīng)用了相同的規(guī)則。這可確保它們精確重疊。 <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> 使文字區(qū)透明 </h3> <p>使用 rgba 作為文字顏色可以使文字完全透明，因此看起來(lái)就像您正在選擇並編輯預(yù)覽。 <br> </p> <pre class="brush:php;toolbar:false">#editor .code { color: rgba(255, 255, 255, 0); caret-color: magenta; } </pre> <h2> 一點(diǎn)點(diǎn) JavaScript </h2> <p>我們確實(shí)需要少量的 Javascript 將這一切結(jié)合在一起。讓我們看看我們需要什麼。 <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() 函數(shù)在這裡做了幾件事。 </h3> <pre class="brush:php;toolbar:false"><div id="editor"> <div class="preview"></div> <textarea class="code" spellcheck="false"></textarea> </div> </pre> <p>這可確保您鍵入時(shí)，<textarea> 的高度保持不變。增長(zhǎng)，以便容器將滾動(dòng)而不是 <textarea> 。本身。您以前可能見(jiàn)過(guò)它用於製作“自動(dòng)增長(zhǎng)”文字區(qū)域。 <br>

  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;
  }
  

  然後我們使用 Prism 從 中獲取程式碼語(yǔ)法突出顯示它並將結(jié)果放置在預(yù)覽 <div> 中 <h3> 支援製表符縮排 </h3> <p>任何時(shí)候你在編輯程式碼時(shí)，都需要能夠縮進(jìn)，這段程式碼允許我們?cè)谟腥它c(diǎn)擊 tab 時(shí)加入空格，然後再次呼叫mirror()來(lái)更新預(yù)覽。 <br> </p> <pre class="brush:php;toolbar:false">#editor { ... display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; ... } </pre> <p>最後，我們?yōu)?<textarea> 上的輸入新增一個(gè)事件監(jiān)聽(tīng)器。並在每次變更時(shí)使用mirror()更新預(yù)覽。然後我們先呼叫mirror()，以防<textarea>中已經(jīng)有程式碼。在頁(yè)面載入時(shí)。

  就是這樣！顯然，如果您要編輯數(shù)千行程式碼，則在更新所有語(yǔ)法突出顯示的程式碼時(shí)可能會(huì)遇到效能問(wèn)題。改進(jìn)這個(gè)想法的一種方法是建立一個(gè)「虛擬」捲軸，並且僅突出顯示容器視圖中可見(jiàn)的程式碼。這就是 VsCode 的編輯器的工作方式。

  如果您想嘗試一下，您可以找到
  GitHub 上的程式碼和工作範(fàn)例