下面我将提供一个完整的 Vue 3 项目中使用 md-editor-v3 的 Markdown 编辑器实现，包含常用功能和最佳实践。
1. 基础实现
安装依赖
npm install md-editor-v3
也可以是pnpm安装
pnpm install md-editor-v3
基础编辑器组件 (BasicEditor.vue)
import { ref } from 'vue';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
const text = ref('Hello Editor!');
自定义工具栏
根据 md-editor-v3 的文档，以下是完整的工具栏参数列表：
const toolbars = [ 'bold', // 加粗 'underline', // 下划线 'italic', // 斜体 'strikeThrough', // 删除线 'title', // 标题 'sub', // 下标 'sup', // 上标 'quote', // 引用 'unorderedList', // 无序列表 'orderedList', // 有序列表 'task', // 任务列表 'codeRow', // 行内代码 'code', // 代码块 'link', // 链接 'image', // 图片 'table', // 表格 'mermaid', // Mermaid图表 'katex', // 数学公式 'revoke', // 撤销 'next', // 重做 'save', // 保存 '=', // 等宽 'pageFullscreen',// 页面全屏 'fullscreen', // 全屏 'preview', // 预览 'htmlPreview', // HTML预览 'catalog', // 目录 '-' // 分隔符 ]
您可以根据需要自由组合这些参数来定制工具栏。
参考以下示例
import { ref } from 'vue'
import { MdEditor } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
const text = ref('Hello Editor!')
// 自定义工具栏配置
const toolbars = [
'bold', // 加粗
'underline', // 下划线
'italic', // 斜体
'strikeThrough', // 删除线
'title', // 标题
'sub', // 下标
'sup', // 上标
'quote', // 引用
'-', // 分隔符
'unorderedList', // 无序列表
'orderedList', // 有序列表
'task', // 任务列表
'-', // 分隔符
'codeRow', // 行内代码
'code', // 代码块
'link', // 链接
'image', // 图片
'table', // 表格
'_', // 分隔符
'mermaid', // Mermaid图表
'katex', // 数学公式
'revoke', // 撤销
'next', // 重做
'save', // 保存
'=', // 等宽
'-', // 分隔符
'pageFullscreen', // 页面全屏
'fullscreen', // 全屏
'preview', // 预览
'htmlPreview', // HTML预览
'catalog', // 目录
]
2. 预览功能
预览组件 (
-
MdPreview是 文章预览
-
MdCatalog是目录预览
import { ref } from 'vue';
import { MdPreview, MdCatalog } from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';
const id = 'preview-only';
const text = ref('# Hello Editor');
const scrollElement = document.documentElement;
MdPreview是 文章预览
MdCatalog是目录预览
import { ref } from 'vue';
import { MdPreview, MdCatalog } from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';
const id = 'preview-only';
const text = ref('# Hello Editor');
const scrollElement = document.documentElement;
还可以实现很多功能
参考网址：md-editor-v3
这个实现提供了完整的Markdown编辑体验，可以直接集成到Vue 3项目中，也可以根据需要进行定制和扩展。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持IT俱乐部。
