# online-code-editor

**Repository Path**: Hilbert777/online-code-editor

## Basic Information

- **Project Name**: online-code-editor
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-26
- **Last Updated**: 2026-05-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 在线代码编辑器

一个可以在浏览器中编写、运行和分享 `HTML / CSS / JavaScript` 的在线代码编辑器。打开页面后即可开始写代码，右侧实时预览效果，底部查看控制台输出，适合前端课程作业演示、课堂练习和小型页面实验。

页面已在Vercel部署：https://online-code-editor-pink-five.vercel.app/

## 主要功能

- 代码编辑：支持 HTML、CSS、JavaScript 三个编辑区，带语法高亮、行号和基础补全。
- 实时预览：修改代码后自动刷新预览，也可以点击“运行”手动刷新。
- 控制台输出：捕获 `console.log`、`console.warn`、`console.error` 和运行时报错。
- 分享代码：点击“分享”生成链接，别人打开链接后可以恢复当前代码。
- 保存到本地：点击“保存”可导出一个独立 `.html` 文件，下载后可直接用浏览器打开。
- 上传本地代码：支持导入 `.html`、`.htm`、`.css`、`.js`、`.mjs`、`.json` 文件。
- 模板功能：内置空白模板、登录卡片、动画按钮，也支持把当前代码“保存为模板”。
- 自动保存：编辑内容、主题和当前模板会保存在浏览器本地，刷新后自动恢复。
- 主题切换：支持深色和浅色模式。
- 拖拽布局：可以拖动分隔条调整编辑区、预览区和控制台大小。

## 如何使用

### 编写和运行代码

1. 打开页面后，默认进入空白模板。
2. 在左侧编辑区切换 `HTML`、`CSS`、`JS` 标签并输入代码。
3. 右侧预览区会自动刷新页面效果。
4. 需要立即刷新时，点击顶部“运行”按钮。

### 查看控制台

页面底部是控制台区域。代码中的：

```js
console.log('hello')
console.warn('warning')
console.error('error')
```

都会显示在这里。运行时报错也会出现在控制台和预览区提示条中。

### 分享代码

1. 点击顶部“分享”按钮。
2. 页面会弹出当前代码对应的分享链接。
3. 复制链接并发送给他人。
4. 对方打开链接后，会自动恢复你分享时的代码内容。

### 保存到本地

点击顶部“保存”按钮，会下载一个类似下面名称的文件：

```text
online-code-editor-20260524-153000.html
```

这个文件包含当前 HTML、CSS 和 JavaScript，可以直接双击用浏览器打开。

### 上传本地代码

点击顶部“上传”按钮，可以选择本地文件导入编辑器。

支持的文件类型：

```text
.html .htm .css .js .mjs .json
```

上传 HTML 文件时，系统会自动拆分内容：

- `body` 内容进入 HTML 编辑区
- `<style>` 内容进入 CSS 编辑区
- 内联 `<script>` 内容进入 JavaScript 编辑区

上传 CSS 或 JS 文件时，只会覆盖对应编辑区。

### 保存为模板

1. 写好当前代码。
2. 点击“保存为模板”。
3. 输入模板名称。
4. 模板会出现在模板下拉框中，格式为：

```text
自定义：模板名称
```

自定义模板会保存在浏览器本地，刷新页面后仍然可用。如果输入已有的自定义模板名称，会更新该模板内容。

### 切换模板

顶部“模板”下拉框可以切换内置模板或自定义模板。切换模板会覆盖当前代码，因此页面会先弹出确认提示。

### 调整布局

- 拖动编辑区和预览区之间的分隔条，可以调整左右宽度。
- 拖动控制台上方的分隔条，可以调整控制台高度。
- 小屏幕下可以在“编辑器”和“预览”之间切换。

## 本地运行

安装依赖：

```bash
npm install
```

启动开发服务：

```bash
npm run dev
```

浏览器访问：

```text
http://localhost:5173/
```

## 构建部署

生产构建：

```bash
npm run build
```

构建产物会生成在：

```text
dist
```

部署到 Vercel 时使用：

```text
Framework Preset: Vite
Build Command: npm run build
Output Directory: dist
```

## 技术说明

- 前端框架：Vue 3
- 构建工具：Vite
- 开发语言：TypeScript
- 编辑器：Monaco Editor
- 状态管理：Pinia
- 分享压缩：LZ-String
- 控制台通信：iframe `postMessage`

用户代码会在带 `sandbox` 的 iframe 中运行，不会直接注入主页面。