feat(editor): implement WYSIWYG Markdown editor using Milkdown Crepe

Replace the existing contenteditable-based markdown editor with a full-featured WYSIWYG editor using @milkdown/crepe. The new implementation provides:
- True WYSIWYG editing experience with instant Markdown syntax rendering
- Slash command menu support for quick formatting
- Code block highlighting and image paste support
- Built-in export to markdown file functionality

Changes include new MilkdownEditor component, updated App.vue integration, theme styling imports, and optimized Vite configuration for the new dependencies.
This commit is contained in:
2026-01-18 09:08:38 +08:00
parent d9ab341223
commit 55c1b180f7
8 changed files with 2581 additions and 142 deletions
+74
View File
@@ -0,0 +1,74 @@
# Milkdown 全屏 WYSIWYG Markdown 编辑器实施方案
## 项目概述
基于 `@milkdown/crepe` 实现全屏覆盖的所见即所得 Markdown 编辑器,替换现有的 contenteditable 编辑器。
## 技术选型
- **核心编辑器**: `@milkdown/crepe` - 功能完整的 WYSIWYG Markdown 编辑器
- **Vue 集成**: `@milkdown/vue` - Vue 3 组件支持
- **主题**: `frame`(简洁框架主题)
## 系统架构
```mermaid
graph TB
A[App.vue] --> B[MilkdownProvider]
B --> C[Milkdown Editor - Crepe]
subgraph "Crepe 核心功能"
D[WYSWIYG 编辑体验]
E[Markdown 语法即时渲染]
F[斜杠命令菜单 Slash Commands]
G[代码块高亮]
H[图片粘贴支持]
end
```
## 实施步骤
### Step 1: 安装依赖包
```bash
npm install @milkdown/crepe @milkdown/vue
```
### Step 2: 创建 Milkdown 编辑器组件
**文件**: `src/components/MilkdownEditor.vue`
```vue
<template>
<MilkdownProvider>
<Milkdown />
</MilkdownProvider>
</template>
<script setup>
import { Milkdown, MilkdownProvider, useEditor } from '@milkdown/vue'
import { Crepe } from '@milkdown/crepe'
const { get } = useEditor((root) => new Crepe({ root }))
</script>
```
### Step 3: 更新 App.vue
- 移除旧的 `MarkdownEditor` 组件引用
- 使用新的 `MilkdownEditor` 组件
- 保持全屏布局(100vh × 100vw
### Step 4: 添加样式配置
`main.js` 中导入 Crepe 主题:
```js
import '@milkdown/crepe/theme/common/style.css'
import '@milkdown/crepe/theme/frame.css'
```
## 全屏覆盖样式要点
- 编辑器容器: `width: 100vw; height: 100vh`
- 移除默认 padding/margin
- 纯编辑器模式,无预览面板