# Editor

**Repository Path**: fluoqiu/Editor

## Basic Information

- **Project Name**: Editor
- **Description**: 一个基于 Vue 3 + TypeScript + Vite 构建的现代化 Markdown 编辑器，提供实时预览、语法高亮等功能。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2025-09-05
- **Last Updated**: 2025-11-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Markdown, Vue, TypeScript

## README

# Vue Markdown Editor

一个基于 Vue 3 + TypeScript + Vite 构建的现代化 Markdown 编辑器，提供实时预览、语法高亮、主题切换等功能。

## ✨ 特性

- 🚀 **现代化技术栈**: Vue 3 + TypeScript + Vite
- 📝 **实时预览**: 编辑时即时查看渲染效果
- 🎨 **语法高亮**: 支持多种编程语言的代码高亮
- 🌓 **主题切换**: 支持亮色/暗色主题
- 🛠️ **丰富工具栏**: 提供常用格式化操作
- 📊 **流程图支持**: 集成 Mermaid 图表渲染
- 📄 **PDF 导出**: 一键导出为 PDF 文档
- ⚡ **高性能**: 优化的渲染性能和用户体验
- 🔧 **可扩展**: 支持插件系统和自定义主题

## 🚀 快速开始

### 环境要求

- Node.js >= 16.0.0
- npm >= 7.0.0 或 yarn >= 1.22.0

### 安装

```bash
# 克隆项目
git clone https://gitee.com/fluoqiu/Editor.git
cd Editor

# 安装依赖
npm install
```

### 开发

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

访问 http://localhost:3000 查看应用。

### 构建

```bash
# 构建生产版本
npm run build

# 预览构建结果
npm run preview
```

## 📖 文档

- [开发文档](./DEVELOPMENT_GUIDE.md) - 详细的开发指南和架构说明
- [使用指南](./USER_GUIDE.md) - 完整的用户使用手册

## 🛠️ 技术栈

### 核心技术
- **Vue 3** - 渐进式 JavaScript 框架
- **TypeScript** - 类型安全的 JavaScript 超集
- **Vite** - 下一代前端构建工具
- **Pinia** - Vue 3 状态管理库
- **Element Plus** - Vue 3 UI 组件库

### 功能库
- **markdown-it** - Markdown 解析器
- **highlight.js** - 代码语法高亮
- **mermaid** - 流程图和图表渲染
- **html2canvas** - 页面截图
- **jspdf** - PDF 生成

## 📁 项目结构

```
src/
├── components/          # 组件目录
│   ├── Common/         # 通用组件
│   ├── Dialogs/        # 对话框组件
│   └── Editor/         # 编辑器组件
├── hooks/              # 组合式函数
├── stores/             # 状态管理
├── styles/             # 样式文件
├── types/              # 类型定义
└── utils/              # 工具函数
```

## 🎯 主要功能

### 编辑器功能
- 实时 Markdown 编辑和预览
- 语法高亮支持多种编程语言
- 工具栏快捷操作
- 全屏编辑模式
- 滚动同步

### 格式支持
- 标准 Markdown 语法
- 代码块和语法高亮
- 表格和列表
- 链接和图片
- Mermaid 流程图
- 数学公式 (可选)
- 表情符号 (可选)

### 导出功能
- PDF 导出
- HTML 源码获取
- 内容复制

## 🔧 配置

### 主题配置

编辑器支持自定义主题，可以通过 CSS 变量进行配置：

```scss
:root {
  --primary-color: #1890ff;
  --text-color: #333333;
  --bg-color: #ffffff;
  // ... 更多变量
}
```

### 插件扩展

支持通过插件系统扩展功能：

```typescript
const myPlugin = {
  name: 'my-plugin',
  install(options) {
    // 插件逻辑
  }
};
```

## 🤝 贡献

欢迎贡献代码！请阅读 [开发文档](./DEVELOPMENT_GUIDE.md) 了解详细的开发指南。

### 贡献流程

1. Fork 项目
2. 创建功能分支
3. 提交更改
4. 推送到分支
5. 创建 Pull Request

## 📝 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。

## 👨‍💻 作者

**LuoQiu**

- Gitee: TLuoQiu

## 🙏 致谢

感谢以下开源项目：

- [Vue.js](https://vuejs.org/)
- [markdown-it](https://github.com/markdown-it/markdown-it)
- [highlight.js](https://highlightjs.org/)
- [Mermaid](https://mermaid-js.github.io/)
- [Element Plus](https://element-plus.org/)

## 📊 项目状态

![Build Status](https://img.shields.io/badge/build-passing-brightgreen)
![Version](https://img.shields.io/badge/version-1.0.0-blue)
![License](https://img.shields.io/badge/license-MIT-green)

---

如果这个项目对您有帮助，请给它一个 ⭐️！