# Monaco

**Repository Path**: eluup/Monaco

## Basic Information

- **Project Name**: Monaco
- **Description**: # 富文本编辑器 Vue 项目

这是一个集成 Monaco 编辑器的 Vue 3 富文本编辑器项目，支持 Markdown 编辑和实时预览。

## 功能特性

- ✨ **实时预览** - 编辑时实时查看 Markdown 渲染效果
- 📝 **Markdown 支持** - 完整的 Markdown 语法支持
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-08
- **Last Updated**: 2026-02-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Markdown Vue 项目

这是一个集成 Monaco 编辑器的 Vue 3 Markdown项目，支持 Markdown 编辑和实时预览。

## 功能特性

- ✨ **实时预览** - 编辑时实时查看 Markdown 渲染效果
- 📝 **Markdown 支持** - 完整的 Markdown 语法支持
- 🎨 **代码高亮** - 代码块语法高亮显示
- 🔧 **工具栏** - 快速插入常用格式（粗体、斜体、链接、图片、代码块等）
- 👁️ **多种视图** - 支持分栏、仅编辑、仅预览三种视图模式
- 📱 **响应式布局** - 自适应不同屏幕尺寸
- ⚡ **高性能** - 基于 Vite 构建，快速热更新
- 🎯 **智能编辑** - Monaco 编辑器提供的强大编辑功能

## 快速开始

### 安装依赖

```bash
cd Monaco
npm install
```

### 启动开发服务器

```bash
npm run dev
```

项目将在 `http://localhost:3000` 启动

### 构建生产版本

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

## 项目结构

```
Monaco/
├── index.html          # HTML 入口文件
├── package.json        # 项目配置和依赖
├── vite.config.js      # Vite 配置文件
├── README.md           # 项目说明文档
└── src/
    ├── main.js         # Vue 应用入口
    ├── App.vue         # 根组件
    ├── style.css       # 全局样式
    └── components/
        └── MonacoEditor.vue  # Monaco 编辑器组件
```

## 使用说明

### 编辑功能

1. **工具栏操作**：
   - 点击工具栏按钮快速插入格式标记（粗体、斜体、链接、图片、代码块等）
   - 支持在选中文本周围插入格式标记

2. **视图切换**：
   - **分栏模式**：同时显示编辑区和预览区（默认）
   - **仅编辑**：只显示编辑区
   - **仅预览**：只显示预览区
   - 点击右上角的视图切换按钮切换模式

3. **代码操作**：
   - **格式化**：点击"格式化"按钮自动格式化代码
   - **清空**：点击"清空"按钮清除编辑器内容（需确认）

4. **实时预览**：
   - 在左侧编辑区输入 Markdown 文本
   - 右侧预览区实时显示渲染后的 HTML
   - 支持完整的 Markdown 语法

### 支持的 Markdown 语法

- 标题（# H1 到 ###### H6）
- **粗体** 和 *斜体*
- [链接](url) 和 ![图片](url)
- 代码块和 `行内代码`
- 有序和无序列表
- > 引用块
- 表格
- 水平分割线（---）
- 换行支持（GFM）

## 技术栈

- **Vue 3** - 渐进式 JavaScript 框架（Composition API）
- **Monaco Editor** - VS Code 使用的代码编辑器
- **Marked** - Markdown 解析库
- **DOMPurify** - HTML 安全处理库
- **Vite** - 下一代前端构建工具

## 浏览器支持

- Chrome (最新版本)
- Firefox (最新版本)
- Safari (最新版本)
- Edge (最新版本)

## 许可证

MIT