mmkk/README.md

Markdown编辑器

一个基于前后端分离架构的Markdown编辑器，支持实时预览、文件管理和正则表达式批量操作。

技术栈

前端

• React 18 + TypeScript + Vite
• react-markdown - Markdown渲染
• react-syntax-highlighter - 代码高亮
• KaTeX - 数学公式渲染
• SplitPane - 可调整的分割布局

后端

• Python Flask
• Markdown - Markdown解析
• Flask-CORS - 跨域支持
• 正则表达式 - 批量文本操作

功能特性

✅ 已实现功能

• Markdown解析器
• 实时预览功能
• 文件操作（创建、读取、更新、删除）
• 正则表达式批量操作
• 代码高亮和数学公式支持
• 文件浏览器
• 键盘快捷键支持
• 自动保存到本地存储

🎯 核心功能

1. Markdown编辑

   • 实时语法高亮
   • 快捷键支持（Ctrl+B粗体，Ctrl+I斜体等）
   • 工具栏快捷操作

2. 实时预览

   • 同步滚动
   • 目录生成
   • 代码块高亮
   • 数学公式渲染
   • 表格支持

3. 文件管理

   • 文件浏览
   • 文件创建/编辑/删除
   • 目录导航
   • 文件搜索

4. 正则表达式工具

   • 常用模式预设
   • 实时匹配测试
   • 批量替换
   • 捕获组支持
   • 操作历史记录

快速开始

安装依赖

1. 安装后端依赖

cd backend
pip install -r requirements.txt

2. 安装前端依赖

cd frontend
npm install

启动服务

1. 启动后端服务

cd backend
python app.py
# 或使用环境变量设置端口和调试模式
PORT=5000 DEBUG=true python app.py

2. 启动前端服务

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)
• 图片: ![alt文本](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