md-editor-v3使用教程:Vue 3中的Markdown编辑利器
本文将手把手教你如何在 Vue 3 项目中集成功能强大的 Markdown 编辑器 md-editor-v3
,并实现自定义图片上传功能。以下是完整的实现步骤和代码分析。
一、md-editor-v3核心优势
特性 | 说明 | 使用场景 |
---|---|---|
现代化UI | 清晰的双栏设计,多主题支持 | 博客系统、文档平台 |
图片上传 | 内置上传处理逻辑 | 内容管理系统 |
响应式布局 | 完美适配移动设备 | 多终端应用 |
高性能 | Vue 3 Composition API优化 | 大型文档编辑 |
📦 二、安装与基础使用
1. 安装依赖
npm install md-editor-v3
# 或
yarn add md-editor-v3
2. 组件基础结构
<script setup>
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
// 双向绑定 Markdown 内容
const content = defineModel({
default: '',
type: String,
required: true,
});
</script>
<template>
<MdEditor v-model="content" previewTheme="github" />
</template>
🖼️ 三、实现图片上传功能
关键代码解析 ( 部分
<script setup>
import { Message } from "@arco-design/web-vue";
import http from "@/lib/http"; // 项目中的 HTTP 库(如 Axios)
import { route } from "ziggy-js"; // 路由工具(可替换为 vue-router)
// 1. 获取 CSRF Token(Laravel 项目需配置)
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
// 2. 单个图片上传方法
const uploadSingleImage = async (file) => {
const formData = new FormData();
formData.append('file', file);
try {
const res = await http.post(
route('admin.upload.image'), // 后端图片上传接口
formData,
{
headers: {
'Content-Type': 'multipart/form-data',
'X-CSRF-TOKEN': csrfToken // 传递 CSRF Token
}
}
);
return res.data.url; // 返回图片 URL
} catch (err) {
console.error(`文件 ${file.name} 上传失败:`, err);
Message.error(`上传失败: ${err.message}`);
return null;
}
};
// 3. 处理编辑器中的图片上传事件
const onUploadImg = async (files, callback) => {
try {
const imageUrls = await Promise.all(
Array.from(files).map(file => uploadSingleImage(file))
);
callback(imageUrls.filter(url => url !== null)); // 将有效 URL 回传给编辑器
} catch (err) {
Message.error('批量上传失败');
}
};
</script>
模板中使用
<template>
<MdEditor
v-model="content"
previewTheme="github"
@onUploadImg="onUploadImg" <!-- 绑定图片上传事件 -->
/>
</template>
四、进阶配置指南
主题切换
<MdEditor
v-model="content"
:previewTheme="currentTheme"
/>
// 可选主题: default, github, vuepress, mk-cute
工具栏自定义
const toolbars = [
'bold', 'underline', 'italic', 'strikeThrough',
'image', 'code', 'table', 'revoke', 'next'
];
<MdEditor :toolbars="toolbars" />
样式定制
/* 全局样式覆盖 */
:root {
--md-bk-color: #f8fafc;
--md-toolbar-bg-color: #1e5799;
--md-toolbar-color: #fff;
--md-border-color: #e1e4e8;
}
md-editor-v3作为Vue 3生态中优秀的Markdown编辑器,通过其简洁的API和强大的扩展性,能完美满足各种内容编辑需求。核心优势包括:
-
开箱即用:五分钟完成集成
-
高度可定制:主题/工具栏灵活配置
-
企业级功能:完善的图片上传方案
-
响应式设计:移动端友好体验