# TMD Editor

**Repository Path**: ywentao6/tmd-editor

## Basic Information

- **Project Name**: TMD Editor
- **Description**: TMD Editor 是一款运行于浏览器的 Markdown 编辑器，追求极简、无干扰的写作体验。无需注册、无需后端，所有数据保存在本地。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://atao.me/
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-04-04
- **Last Updated**: 2026-04-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# TMD Editor

> 沉浸式、纯前端 Markdown 在线编辑器

![Vue 3](https://img.shields.io/badge/Vue-3-4FC08D?logo=vue.js&logoColor=white)
![TypeScript](https://img.shields.io/badge/TypeScript-5-3178C6?logo=typescript&logoColor=white)
![Vite](https://img.shields.io/badge/Vite-8-646CFF?logo=vite&logoColor=white)
![License](https://img.shields.io/badge/License-MIT-green)

TMD Editor 是一款运行于浏览器的 Markdown 编辑器，追求极简、无干扰的写作体验。无需注册、无需后端，所有数据保存在本地。

---

## 功能特性

### 编辑与渲染
- **实时预览** — 分屏模式下左侧编辑、右侧同步渲染
- **代码高亮** — 基于 highlight.js，支持主流编程语言
- **安全渲染** — DOMPurify 过滤 XSS，v-html 安全输出
- **同步滚动** — 编辑区滚动时预览区同步跟随
- **字数统计** — 工具栏实时显示非空白字符数

### 布局模式
| 模式 | 说明 |
|------|------|
| 分屏 | 源码编辑 + 预览并排 |
| 仅源码 | 专注写作 |
| 仅预览 | 专注阅读 |

### 快捷键（Typora 风格）
| 快捷键 | 功能 |
|--------|------|
| `Ctrl/Cmd + B` | 加粗 |
| `Ctrl/Cmd + I` | 斜体 |
| `Ctrl/Cmd + K` | 插入链接 |
| `Ctrl/Cmd + 1 / 2 / 3` | 一 / 二 / 三级标题 |
| `Ctrl/Cmd + Shift + 7` | 无序列表 |
| `Ctrl/Cmd + Shift + 8` | 有序列表 |
| `Ctrl/Cmd + Shift + C` | 代码块 |
| `Ctrl/Cmd + Shift + Q` | 引用块 |
| `Ctrl/Cmd + Shift + D` | 分隔线 |
| `Ctrl/Cmd + E` | 源码 / 预览切换 |
| `Ctrl/Cmd + S` | 保存 |
| `Ctrl/Cmd + ?` | 查看全部快捷键 |

### 文档管理
- **保存到本地库** — 文档保存至 localStorage，不触发文件下载
- **文档列表** — 查看、打开、重命名、下载、删除已保存的文档
- **导出 .md 文件** — 一键下载为本地 Markdown 文件
- **自动暂存** — 停止输入若干秒后自动写入草稿，可配置间隔（5–300 秒）
- **草稿恢复** — 启动时检测未保存草稿并提示恢复
- **脏状态检查** — 新建前若有未保存内容，提示是否保存

---

## 技术栈

| 层 | 技术 |
|----|------|
| 框架 | Vue 3 + Vite + TypeScript |
| 状态管理 | Pinia |
| Markdown 渲染 | markdown-it |
| 代码高亮 | highlight.js |
| 安全清洗 | DOMPurify |
| 组合式工具 | @vueuse/core |
| 图标 | lucide-vue-next |

---

## 快速开始

### 环境要求

- Node.js >= 18
- npm >= 9

### 安装与运行

```bash
# 克隆仓库
git clone https://gitee.com/ywentao6/tmd-editor.git
cd tmd-editor

# 安装依赖
npm install

# 启动开发服务器
npm run dev
```

浏览器会自动打开 `http://localhost:5173`。

### 构建生产版本

```bash
npm run build
```

产物输出到 `dist/` 目录，可直接部署到任意静态托管服务（GitHub Pages、Vercel、Netlify 等）。

```bash
# 本地预览构建产物
npm run preview
```

---

## 项目结构

```
src/
├── App.vue                        # 根组件，主编排逻辑
├── main.ts
├── style.css                      # 全局样式与 CSS 变量主题
├── components/
│   ├── layout/
│   │   └── TopToolbar.vue         # 顶部工具栏
│   ├── editor/
│   │   └── SourceEditor.vue       # 源码编辑区
│   ├── preview/
│   │   └── MarkdownPreview.vue    # 预览区
│   └── dialog/
│       ├── ConfirmDialog.vue      # 通用确认弹窗
│       ├── FilenameDialog.vue     # 文件名输入弹窗
│       ├── DocumentList.vue       # 文档列表弹窗
│       └── HotkeyMenu.vue         # 快捷键帮助弹窗
├── composables/
│   ├── useAutosave.ts             # 自动暂存逻辑
│   └── useEditorHotkeys.ts        # 全局快捷键绑定
├── services/
│   ├── markdown/
│   │   └── parser.ts              # markdown-it 渲染 + DOMPurify 清洗
│   ├── file/
│   │   └── exporter.ts            # 文件下载导出
│   └── storage/
│       ├── documents.ts           # localStorage 文档库 CRUD
│       └── draft.ts               # 草稿读写
├── stores/
│   └── editor.ts                  # Pinia 编辑器状态仓库
└── types/
```

---

## 数据存储说明

所有数据均保存在浏览器 **localStorage**，不上传任何服务器。

| Key | 内容 |
|-----|------|
| `tmd-editor:documents:v1` | 文档库（JSON 数组） |
| `tmd-editor:draft:v1` | 自动暂存草稿 |
| `tmd-editor:autosave-delay:v1` | 暂存间隔秒数设置 |

> **注意**：清除浏览器缓存或 localStorage 会导致本地文档丢失。建议定期使用导出功能备份重要文档。

---

## 已知限制

- localStorage 容量约 5 MB，大量长文档可能触及上限
- 构建产物存在大 chunk（highlight.js 体积较大），后续计划按需加载
- 暂不支持 Markdown 扩展插件（任务列表、脚注、目录等）

---

## 路线图

- [ ] 补充单元测试与 E2E 测试
- [ ] 代码分包优化，解决大 chunk 告警
- [ ] 支持更多 Markdown 插件（任务列表、目录、脚注）
- [ ] 主题切换与用户设置持久化
- [ ] 探索 File System Access API，实现更接近桌面编辑器的保存体验

---

## 贡献指南

欢迎提交 Issue 和 Pull Request。

1. Fork 本仓库
2. 创建特性分支：`git checkout -b feat/your-feature`
3. 提交代码并确保 `npm run build` 通过
4. 发起 Pull Request，描述改动内容

---

## License

[MIT](./LICENSE)