SQL Editor

一款纯前端、零依赖的 SQL 编辑器，单个 HTML 文件即可运行，无需安装任何环境。

---

快速开始

方式一：直接打开（推荐用于纯编辑）

双击 sql-editor.html，在浏览器中打开即可使用。

⚠️ 此方式下，配置文件无法自动加载（浏览器安全限制），需手动点击工具栏的 📁 加载 按钮导入。

方式二：本地服务器（推荐用于完整功能）

将 sql-editor.html 和配置文件放在同一目录，启动本地服务器后访问：

# Python 3
python3 -m http.server 8080
# 访问 http://localhost:8080/sql-editor.html

本地服务器方式下，编辑器启动时会自动加载配置文件，无需手动导入。

---

配置表结构

编辑器通过配置文件识别数据库表结构，从而提供自动补全功能。

支持的配置文件名

编辑器启动时按以下顺序自动查找，找到有效文件即停止：

1. postgres.cfg
2. postgresql.cfg

两个文件格式完全相同，任选其一放在与 HTML 同目录即可。

文件格式

每行定义一张表，格式为：

表名:字段1:类型1,字段2:类型2,字段3:类型3

以 # 开头的行为注释，会被忽略。类型中的括号（如 DECIMAL(10,2)、VARCHAR(100)）不影响解析，可完整书写。

示例

# 用户表
users:id:INTEGER,name:VARCHAR(100),email:VARCHAR(255),created_at:TIMESTAMP,status:VARCHAR(20)

# 订单表
orders:id:INTEGER,user_id:INTEGER,amount:DECIMAL(10,2),status:VARCHAR(20),created_at:TIMESTAMP,updated_at:TIMESTAMP

# 商品表
products:id:INTEGER,name:VARCHAR(200),price:DECIMAL(10,2),category:VARCHAR(50),stock:INTEGER

三种加载方式

方式	操作
自动加载	使用本地服务器时，启动后自动读取同目录的配置文件
手动导入	点击工具栏 📁 打开 按钮，选择本地 .cfg 文件
界面配置	点击工具栏 ⚙️ 配置 按钮，在弹窗中编辑表结构，保存后自动下载配置文件

配置加载成功后，底部状态栏会显示已识别的表名列表。

---

自动补全

字段补全

在表名或别名后输入 .，自动弹出该表的字段列表；继续输入字母可按首字母过滤。

SELECT users.▌         -- 弹出 users 表的全部字段
SELECT users.na▌       -- 只显示 users 表中以 "na" 开头的字段（如 name）
SELECT u.▌             -- 弹出别名 u 对应表的字段（需在 FROM 中定义别名）

表名补全

在以下 SQL 关键字后输入时，自动弹出匹配的表名列表：

关键字	示例
FROM	SELECT * FROM u▌
JOIN / LEFT JOIN / RIGHT JOIN / INNER JOIN	FROM users JOIN o▌
INSERT INTO	INSERT INTO ord▌
UPDATE	UPDATE pro▌
DELETE FROM	DELETE FROM u▌
CREATE TABLE	CREATE TABLE new▌
ALTER TABLE	ALTER TABLE u▌
DROP TABLE	DROP TABLE o▌

关键字补全

输入 2 个及以上字母时，自动匹配 SQL 关键字候选项。

SE▌    -- 候选：SELECT、SET
WH▌    -- 候选：WHERE
OR▌    -- 候选：ORDER、OR

选中后自动补全关键字并追加空格，光标就位。

补全操作

按键	操作
↓ / ↑	在候选项中上下移动
Enter 或 Tab	插入选中的候选项
Esc	关闭补全列表
鼠标点击	直接插入该项

---

文件操作

操作	按钮	快捷键
打开 .sql 文件到新标签页	📂 打开	Ctrl+O
将当前标签页保存为 .sql 文件	💾 保存	Ctrl+S

打开文件时，文件名会自动设置为标签页名称。支持一次选择多个文件，每个文件会在独立标签页中打开。

---

多标签页

• 点击工具栏右侧的 + 新建标签页
• 点击标签页上的 × 关闭标签页（至少保留一个）
• 双击标签页名称可重命名
• 标签页超过 5 个时，左侧自动出现侧边栏，方便在大量标签页间切换
• 所有标签页内容自动保存到浏览器本地存储，刷新页面不丢失

---

主题切换

点击工具栏的 🎨 主题 按钮，可在 15 种主题之间切换：

主题	风格
默认	深色（VS Code 风格）
纯白	亮色
护眼绿	绿色护眼
护眼黄	黄色护眼
暗蓝	GitHub 深色风格
暗紫	紫色深色
高对比	高对比度无障碍
克兰因蓝	经典蓝调深色
蒂芙尼蓝	清新薄荷蓝
爱马仕橙	温暖橙棕
中国红	中式朱红深色
帝王黄	金黄暖色
牛油果绿	自然橄榄绿
玫瑰粉	柔和粉色
摩卡棕	咖啡深棕

主题选择会自动保存，下次打开仍生效。

---

键盘快捷键

编辑操作

快捷键	功能
Ctrl+D / ⌘+D	复制上一行到当前行，光标移至行尾
Ctrl+E / ⌘+E	清空当前行内容；若当前行已为空则删除该行
Ctrl+Z / ⌘+Z	撤销
Ctrl+/ / ⌘+/	切换行注释（--），支持多行选中
Tab（无补全时）	插入 2 个空格缩进
Tab（有选中内容）	对所有选中行增加缩进
Shift+Tab	对所有选中行减少缩进
( 或 [	自动补全右括号；有选中内容时包裹选中内容

查找与导航

快捷键	功能
Ctrl+G / ⌘+G	跳转到指定行号

文件

快捷键	功能
Ctrl+S / ⌘+S	保存当前标签页为 .sql 文件
Ctrl+O / ⌘+O	打开 .sql 文件

---

编辑器大小调整

拖动编辑区底部的拖拽条，可上下调整编辑区高度。调整后的高度自动保存，刷新页面仍保持。

---

状态栏

编辑器底部状态栏实时显示：

• 光标位置：当前所在行号和列号（如 Line 5, Col 12）
• 常用快捷键提示：Ctrl+D、Ctrl+E、Ctrl+Z、Ctrl+/、Ctrl+G
• 已加载表：当前识别到的所有表名

---

文件说明

sql-editor.html    # 编辑器主体，所有功能均在此文件中
postgres.cfg       # 表结构配置文件（或 postgresql.cfg），与 HTML 同目录放置