一个简单的、主要是 CSS 的代码编辑器

在本文中，我将讨论如何使用主要使用 CSS 来制作一个非常简单的、基于浏览器的代码编辑器。我最初构建这个是当我需要让用户在我正在构建的 CMS 中编辑 JSON 时。

如果您只想跳转到代码和工作示例，就在这里。代码可以在这里找到，工作示例可以在这里

内容可编辑太烂了...

因此，如果您曾经考虑过构建自己的代码编辑器，那么您可能已经看过 contenteditable。虽然 contenteditable 在许多情况下都非常有用，但在您键入时更新内容方面存在一个巨大的问题。当编辑器中的代码发生变化时，在语法高亮显示代码后，几乎不可能将光标放回到原来的位置。

就我而言，我想要一些非常小的东西，而不需要一些巨大的、笨重的库。我开始考虑是否可以构建一个主要使用 CSS 的非常简单的编辑器，仅使用 Javascript 创建语法突出显示的输出，并更新预览。

我想输入一个普通的 但只是更新语法突出显示代码的单独预览。

幻觉是如何运作的

HTML 代码

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

• 常规的 带有透明文本
• A
  ;填充了语法突出显示的代码。
• 一个包裹你的 的容器和您的预览 <div>;这样他们就可以一起滚动并保持排队。 <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> 一点点 JavaScript </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>

  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 从 中获取代码语法突出显示它并将结果放置在预览 <div> 中 <h3> 支持制表符缩进 </h3> <p>任何时候你在编辑代码时，都需要能够缩进，这段代码允许我们在有人点击 tab 时添加空格，然后再次调用mirror()来更新预览。<br> </p> <pre class="brush:php;toolbar:false">#editor { ... display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; ... } </pre> <p>最后，我们为 <textarea> 上的输入添加一个事件监听器。并在每次更改时使用mirror()更新预览。然后我们首先调用mirror()，以防<textarea>中已经有代码。在页面加载时。

  就是这样！显然，如果您要编辑数千行代码，则在更新所有语法突出显示的代码时可能会遇到性能问题。改进这个想法的一种方法是创建一个“虚拟”滚动条，并且仅突出显示容器视图中可见的代码。这就是 VsCode 的编辑器的工作方式。

  如果您想尝试一下，您可以找到
  GitHub 上的代码和工作示例