ydy0615
55c1b180f7
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.
1.7 KiB
1.7 KiB
Milkdown 全屏 WYSIWYG Markdown 编辑器实施方案
项目概述
基于 @milkdown/crepe 实现全屏覆盖的所见即所得 Markdown 编辑器，替换现有的 contenteditable 编辑器。
技术选型
- 核心编辑器:
@milkdown/crepe- 功能完整的 WYSIWYG Markdown 编辑器 - Vue 集成:
@milkdown/vue- Vue 3 组件支持 - 主题:
frame（简洁框架主题）
系统架构
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: 安装依赖包
npm install @milkdown/crepe @milkdown/vue
Step 2: 创建 Milkdown 编辑器组件
文件: src/components/MilkdownEditor.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 主题：
import '@milkdown/crepe/theme/common/style.css'
import '@milkdown/crepe/theme/frame.css'
全屏覆盖样式要点
- 编辑器容器:
width: 100vw; height: 100vh - 移除默认 padding/margin
- 纯编辑器模式，无预览面板