9b3f959c3d
项目特性： - 完整的Markdown编辑器，支持实时预览 - 文件管理功能，支持保存/加载/删除文件 - 正则表达式工具，支持批量文本替换 - 前后端分离架构 - 响应式设计 技术栈： - 前端：React + TypeScript + Vite - 后端：Python Flask - Markdown解析：Python-Markdown 包含组件： - WorkingMarkdownEditor: 基础功能版本 - FullMarkdownEditor: 完整功能版本 - SimpleMarkdownEditor: 简化版本
214 lines
5.2 KiB
Markdown
214 lines
5.2 KiB
Markdown
# Markdown编辑器
|
||
|
||
一个基于前后端分离架构的Markdown编辑器，支持实时预览、文件管理和正则表达式批量操作。
|
||
|
||
## 技术栈
|
||
|
||
### 前端
|
||
- **React 18** + **TypeScript** + **Vite**
|
||
- **react-markdown** - Markdown渲染
|
||
- **react-syntax-highlighter** - 代码高亮
|
||
- **KaTeX** - 数学公式渲染
|
||
- **SplitPane** - 可调整的分割布局
|
||
|
||
### 后端
|
||
- **Python Flask**
|
||
- **Markdown** - Markdown解析
|
||
- **Flask-CORS** - 跨域支持
|
||
- **正则表达式** - 批量文本操作
|
||
|
||
## 功能特性
|
||
|
||
### ✅ 已实现功能
|
||
- [x] Markdown解析器
|
||
- [x] 实时预览功能
|
||
- [x] 文件操作（创建、读取、更新、删除）
|
||
- [x] 正则表达式批量操作
|
||
- [x] 代码高亮和数学公式支持
|
||
- [x] 文件浏览器
|
||
- [x] 键盘快捷键支持
|
||
- [x] 自动保存到本地存储
|
||
|
||
### 🎯 核心功能
|
||
1. **Markdown编辑**
|
||
- 实时语法高亮
|
||
- 快捷键支持（Ctrl+B粗体，Ctrl+I斜体等）
|
||
- 工具栏快捷操作
|
||
|
||
2. **实时预览**
|
||
- 同步滚动
|
||
- 目录生成
|
||
- 代码块高亮
|
||
- 数学公式渲染
|
||
- 表格支持
|
||
|
||
3. **文件管理**
|
||
- 文件浏览
|
||
- 文件创建/编辑/删除
|
||
- 目录导航
|
||
- 文件搜索
|
||
|
||
4. **正则表达式工具**
|
||
- 常用模式预设
|
||
- 实时匹配测试
|
||
- 批量替换
|
||
- 捕获组支持
|
||
- 操作历史记录
|
||
|
||
## 快速开始
|
||
|
||
### 安装依赖
|
||
|
||
1. **安装后端依赖**
|
||
```bash
|
||
cd backend
|
||
pip install -r requirements.txt
|
||
```
|
||
|
||
2. **安装前端依赖**
|
||
```bash
|
||
cd frontend
|
||
npm install
|
||
```
|
||
|
||
### 启动服务
|
||
|
||
1. **启动后端服务**
|
||
```bash
|
||
cd backend
|
||
python app.py
|
||
# 或使用环境变量设置端口和调试模式
|
||
PORT=5000 DEBUG=true python app.py
|
||
```
|
||
|
||
2. **启动前端服务**
|
||
```bash
|
||
cd frontend
|
||
npm run dev
|
||
```
|
||
|
||
3. **访问应用**
|
||
打开浏览器访问 `http://localhost:3000`
|
||
|
||
## API文档
|
||
|
||
### 健康检查
|
||
```
|
||
GET /api/health
|
||
```
|
||
|
||
### Markdown解析
|
||
```
|
||
POST /api/parse
|
||
{
|
||
"content": "# Hello World"
|
||
}
|
||
```
|
||
|
||
### 文件操作
|
||
```
|
||
GET /api/files # 获取文件列表
|
||
GET /api/files/read # 读取文件内容
|
||
POST /api/files/write # 写入文件内容
|
||
DELETE /api/files/delete # 删除文件
|
||
GET /api/files/download # 下载文件
|
||
```
|
||
|
||
### 正则表达式操作
|
||
```
|
||
POST /api/regex/replace # 替换文本
|
||
POST /api/regex/extract # 提取匹配项
|
||
```
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
markdown-editor/
|
||
├── backend/
|
||
│ ├── app/
|
||
│ │ ├── __init__.py # Flask应用初始化
|
||
│ │ └── routes.py # API路由定义
|
||
│ ├── utils/
|
||
│ │ ├── __init__.py
|
||
│ │ ├── markdown_parser.py # Markdown解析器
|
||
│ │ ├── file_manager.py # 文件管理器
|
||
│ │ └── regex_processor.py # 正则表达式处理器
|
||
│ ├── app.py # 应用入口
|
||
│ └── requirements.txt # Python依赖
|
||
├── frontend/
|
||
│ ├── src/
|
||
│ │ ├── components/ # React组件
|
||
│ │ │ ├── MarkdownEditor.tsx
|
||
│ │ │ ├── EditorPanel.tsx
|
||
│ │ │ ├── PreviewPanel.tsx
|
||
│ │ │ ├── FileExplorer.tsx
|
||
│ │ │ ├── Toolbar.tsx
|
||
│ │ │ └── RegexPanel.tsx
|
||
│ │ ├── utils/ # 工具函数
|
||
│ │ │ ├── api.ts
|
||
│ │ │ └── markdown.ts
|
||
│ │ ├── types/ # TypeScript类型定义
|
||
│ │ └── App.tsx
|
||
│ ├── package.json
|
||
│ └── vite.config.ts
|
||
└── README.md
|
||
```
|
||
|
||
## 使用说明
|
||
|
||
### 基本操作
|
||
- **新建文件**: Ctrl+N 或点击工具栏的"新建"按钮
|
||
- **保存文件**: Ctrl+S 或点击工具栏的"保存"按钮
|
||
- **切换文件浏览器**: 点击工具栏的"文件"按钮
|
||
- **打开正则表达式工具**: Ctrl+Shift+F
|
||
|
||
### Markdown语法支持
|
||
- 标题: `# 一级标题`, `## 二级标题`
|
||
- 粗体: `**粗体文本**`
|
||
- 斜体: `*斜体文本*`
|
||
- 链接: `[链接文本](url)`
|
||
- 图片: ``
|
||
- 代码块: ```` ```语言 代码 ``` ````
|
||
- 表格: 使用 `|` 创建表格
|
||
- 数学公式: 行内 `$公式$` 或块级 `$$公式$$`
|
||
|
||
### 文件操作
|
||
- 在文件浏览器中点击文件打开
|
||
- 右键文件进行重命名或删除
|
||
- 使用面包屑导航目录结构
|
||
- 创建新的Markdown文件和目录
|
||
|
||
### 正则表达式使用
|
||
1. 选择常用模式或输入自定义正则
|
||
2. 设置替换文本和标志
|
||
3. 点击"测试"查看匹配结果
|
||
4. 点击"应用"执行替换操作
|
||
|
||
## 开发指南
|
||
|
||
### 添加新的Markdown扩展
|
||
编辑 `backend/utils/markdown_parser.py` 中的 `MarkdownParser` 类，添加新的扩展支持。
|
||
|
||
### 自定义主题
|
||
修改 `frontend/src/index.css` 中的样式变量，可以自定义编辑器的外观。
|
||
|
||
### 扩展API
|
||
在 `backend/app/routes.py` 中添加新的路由，并在前端 `frontend/src/utils/api.ts` 中添加对应的API调用。
|
||
|
||
## 技术细节
|
||
|
||
### 实时预览实现
|
||
使用防抖(debounce)技术，300ms延迟更新预览，避免频繁计算。
|
||
|
||
### 文件系统安全
|
||
- 所有文件操作限制在工作目录内
|
||
- 防止路径遍历攻击
|
||
- 自动创建必要的目录结构
|
||
|
||
### 性能优化
|
||
- 正则表达式预编译缓存
|
||
- 组件懒加载
|
||
- 防抖处理用户输入
|
||
|
||
## 许可证
|
||
MIT License |