如何制作 HTML CSS JS 编辑器

前言

HTML CSS JS 编辑器是开发者在工作中经常用到的工具之一，也是开发者日常工作中必不可少的工具之一。本文将介绍如何使用 JavaScript, CSS 和 HTML 制作一个简单的 HTML CSS JS 编辑器。

需求分析

在开始制作 HTML CSS JS 编辑器之前，我们需要对其进行需求分析。一个基本的 HTML CSS JS 编辑器应该具备以下功能：

1. 支持 HTML，CSS 和 JavaScript 的语法高亮显示。

2. 支持代码缩进和格式化。

3. 支持自动提示和代码补全。

4. 支持保存和导入文件。

技术选型

为了实现这些功能，我们将使用以下技术：

1. HTML：用于构建编辑器的基本结构。

2. CSS：用于编辑器的样式设计。

3. JavaScript：用于实现编辑器的各种功能，例如语法高亮、自动提示等。

4. CodeMirror：一个开源的 JavaScript 代码编辑器，在这里用作编辑器底层。

编辑器结构

下面是编辑器的基本结构。我们将使用 HTML 和 CSS 进行布局和样式的设计：

<div class="editor">
  <div id="html-editor" class="editor-tab active">
    <textarea id="html-input" class="code-input"></textarea>
  </div>
  <div id="css-editor" class="editor-tab">
    <textarea id="css-input" class="code-input"></textarea>
  </div>
  <div id="js-editor" class="editor-tab">
    <textarea id="js-input" class="code-input"></textarea>
  </div>
  <div class="editor-tabbar">
    <button id="html-tab" class="active">HTML</button>
    <button id="css-tab">CSS</button>
    <button id="js-tab">JavaScript</button>
  </div>
</div>

编辑器样式

接下来，我们使用 CSS 进行编辑器的样式设计：

.editor {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
}

.editor-tab {
  display: none;
}

.editor-tab.active {
  display: block;
}

.code-input {
  width: 100%;
  height: 100%;
  resize: none;
  border: none;
  padding: 16px;
  font-family: monospace;
}

.editor-tabbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

.editor-tabbar button {
  border: none;
  background-color: #f4f4f4;
  color: #333;
  padding: 8px 16px;
  cursor: pointer;
}

.editor-tabbar button.active {
  background-color: #333;
  color: #fff;
}

CodeMirror 集成

为了实现编辑器的高级功能，我们将使用 CodeMirror。下载 CodeMirror 后，将其解压到项目文件夹中，然后创建一个 JavaScript 文件，将 CodeMirror 的代码复制粘贴到该文件中：

<link rel="stylesheet" href="codemirror-5.61.1/lib/codemirror.css" />
<script src="codemirror-5.61.1/lib/codemirror.js"></script>
<script src="codemirror-5.61.1/mode/xml/xml.js"></script>
<script src="codemirror-5.61.1/mode/javascript/javascript.js"></script>
<script src="codemirror-5.61.1/mode/css/css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/htmlmixed/htmlmixed.min.js"></script>

然后，我们使用以下 JavaScript 代码将 CodeMirror 集成到编辑器中：

var htmlEditor = CodeMirror.fromTextArea(document.getElementById("html-input"), {
  mode: "htmlmixed",
  lineNumbers: true,
  matchBrackets: true,
  autoCloseTags: true,
  theme: "dracula"
});

var cssEditor = CodeMirror.fromTextArea(document.getElementById("css-input"), {
  mode: "css",
  lineNumbers: true,
  matchBrackets: true,
  autoCloseTags: true,
  theme: "dracula"
});

var jsEditor = CodeMirror.fromTextArea(document.getElementById("js-input"), {
  mode: "javascript",
  lineNumbers: true,
  matchBrackets: true,
  autoCloseTags: true,
  theme: "dracula"
});

var activeEditor = htmlEditor;

function changeTab(editor) {
  activeEditor = editor;
  htmlEditor.setOption("readOnly", true);
  cssEditor.setOption("readOnly", true);
  jsEditor.setOption("readOnly", true);
  activeEditor.setOption("readOnly", false);
}

document.getElementById("html-tab").addEventListener("click", function () {
  changeTab(htmlEditor);
  document.getElementById("html-editor").classList.add("active");
  document.getElementById("css-editor").classList.remove("active");
  document.getElementById("js-editor").classList.remove("active");
});

document.getElementById("css-tab").addEventListener("click", function () {
  changeTab(cssEditor);
  document.getElementById("html-editor").classList.remove("active");
  document.getElementById("css-editor").classList.add("active");
  document.getElementById("js-editor").classList.remove("active");
});

document.getElementById("js-tab").addEventListener("click", function () {
  changeTab(jsEditor);
  document.getElementById("html-editor").classList.remove("active");
  document.getElementById("css-editor").classList.remove("active");
  document.getElementById("js-editor").classList.add("active");
});

添加功能

在完成上述步骤后，我们已经成功地创建了一个基本的 HTML CSS JS 编辑器。接下来，我们可以在此基础上添加更多的功能，例如自动提示、代码补全、保存和导入文件等。

总结

本文介绍了如何使用 JavaScript, CSS 和 HTML 制作一个简单的 HTML CSS JS 编辑器，包括编辑器的结构、样式、CodeMirror 集成和添加功能。通过学习本文，读者可以快速入门 HTML CSS JS 编辑器的制作，为自己的日常开发工作打下基础。