9b3f959c3d
项目特性： - 完整的Markdown编辑器，支持实时预览 - 文件管理功能，支持保存/加载/删除文件 - 正则表达式工具，支持批量文本替换 - 前后端分离架构 - 响应式设计 技术栈： - 前端：React + TypeScript + Vite - 后端：Python Flask - Markdown解析：Python-Markdown 包含组件： - WorkingMarkdownEditor: 基础功能版本 - FullMarkdownEditor: 完整功能版本 - SimpleMarkdownEditor: 简化版本
119 lines
2.7 KiB
Markdown
119 lines
2.7 KiB
Markdown
# 🎯 Markdown编辑器使用指南
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 1. 启动应用
|
||
```bash
|
||
# 使用清理版启动脚本
|
||
./start-clean.sh
|
||
```
|
||
|
||
### 2. 访问应用
|
||
打开浏览器访问：
|
||
- **前端界面**: http://localhost:3001
|
||
- **后端API**: http://localhost:5001
|
||
|
||
## 📋 功能概览
|
||
|
||
### ✅ 已验证可用功能
|
||
|
||
#### 1. 实时Markdown编辑
|
||
- ✅ 左侧编辑，右侧实时预览
|
||
- ✅ 支持基础Markdown语法
|
||
- ✅ 字数统计和行数显示
|
||
- ✅ 响应式设计
|
||
|
||
#### 2. 后端API服务
|
||
- ✅ Markdown解析器 (http://localhost:5001/api/parse)
|
||
- ✅ 文件管理系统 (http://localhost:5001/api/files)
|
||
- ✅ 正则表达式工具 (http://localhost:5001/api/regex)
|
||
- ✅ 健康检查 (http://localhost:5001/api/health)
|
||
|
||
#### 3. 支持的Markdown语法
|
||
- ✅ 标题 (# ## ###)
|
||
- ✅ 粗体和斜体 (**bold** *italic*)
|
||
- ✅ 代码块 (```code```)
|
||
- ✅ 列表 (- item)
|
||
- ✅ 链接和引用
|
||
- ✅ 数学公式 ($E=mc^2$)
|
||
|
||
## 🛠️ 使用步骤
|
||
|
||
### 步骤1：启动服务
|
||
```bash
|
||
cd /home/glowz/claude/mmkk
|
||
./start-clean.sh
|
||
```
|
||
|
||
### 步骤2：访问界面
|
||
打开浏览器访问 http://localhost:3001
|
||
|
||
### 步骤3：开始编辑
|
||
1. 在左侧编辑器输入Markdown内容
|
||
2. 右侧实时显示预览效果
|
||
3. 查看状态栏的字数和行数统计
|
||
|
||
## 🔧 API测试
|
||
|
||
### 测试Markdown解析
|
||
```bash
|
||
curl -X POST http://localhost:5001/api/parse \
|
||
-H "Content-Type: application/json" \
|
||
-d '{"content": "# Hello World\n\nThis is **bold** text."}'
|
||
```
|
||
|
||
### 测试文件列表
|
||
```bash
|
||
curl http://localhost:5001/api/files
|
||
```
|
||
|
||
### 测试正则替换
|
||
```bash
|
||
curl -X POST http://localhost:5001/api/regex/replace \
|
||
-H "Content-Type: application/json" \
|
||
-d '{"content": "hello world", "pattern": "hello", "replacement": "hi"}'
|
||
```
|
||
|
||
## 🎨 界面特色
|
||
|
||
- **专业外观**: 深色标题栏 + 浅色内容区
|
||
- **响应式设计**: 自适应不同屏幕尺寸
|
||
- **直观操作**: 清晰的编辑器和预览区域
|
||
- **实时反馈**: 即时显示字数和行数统计
|
||
|
||
## 🚨 常见问题解决
|
||
|
||
### 端口冲突
|
||
如果遇到端口被占用：
|
||
- **前端**: 自动使用3001端口
|
||
- **后端**: 自动使用5001端口
|
||
|
||
### 服务未启动
|
||
```bash
|
||
# 手动停止所有相关进程
|
||
pkill -f "python.*app.py"
|
||
pkill -f "vite"
|
||
|
||
# 重新启动
|
||
./start-clean.sh
|
||
```
|
||
|
||
## 📞 技术支持
|
||
|
||
- **前端**: React 18 + TypeScript + Vite
|
||
- **后端**: Python Flask + Flask-CORS
|
||
- **Markdown**: python-markdown库
|
||
- **数学公式**: KaTeX支持
|
||
|
||
## 🎯 下一步扩展
|
||
|
||
当前版本为基础工作版本，后续可扩展：
|
||
- 文件浏览器功能
|
||
- 正则表达式工具界面
|
||
- 主题切换
|
||
- 云存储集成
|
||
- 协作编辑功能
|
||
|
||
---
|
||
|
||
**🎉 应用已完全可用！立即访问 http://localhost:3001 开始编辑Markdown！** |