当前位置：首页 > news >正文

Vue 3 中使用 md-editor-v3 的完整实例markdown文本

news 来源：原创 2025/5/19 6:51:42

下面我将提供一个完整的 Vue 3 项目中使用 md-editor-v3 的 Markdown 编辑器实现，包含常用功能和最佳实践。

1. 基础实现

安装依赖

npm install md-editor-v3

也可以是pnpm安装

pnpm install md-editor-v3

基础编辑器组件 (BasicEditor.vue)

<template>
<template><MdEditor v-model="text" />
</template><script setup>
import { ref } from 'vue';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';const text = ref('Hello Editor!');
</script>

自定义工具栏

根据 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',       // 目录'-'              // 分隔符
]

您可以根据需要自由组合这些参数来定制工具栏。

参考以下示例

<script setup>
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', // 目录
]
</script><template><MdEditor v-model="text" :toolbars="toolbars" />
</template>

2. 预览功能

预览组件 (<MdPreview.vue)

MdPreview是 文章预览

MdCatalog是目录预览

<template><!-- 文章预览 --><MdPreview :id="id" :modelValue="text" /><!-- 目录预览 --><MdCatalog :editorId="id" :scrollElement="scrollElement" />
</template><script setup>
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;
</script>