74 lines
1.7 KiB
Markdown
74 lines
1.7 KiB
Markdown
|
# 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
|
|||
|
|
- 纯编辑器模式，无预览面板
|