首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3使用md-editor-v3实例markdown文本

Vue3使用md-editor-v3的实例解读markdown文本

2026-01-12 09:50:31 作者：csdn_HPL

本文介绍了如何在Vue3项目中使用md-editor-v3实现Markdown编辑器,包括基础实现、工具栏自定义、预览功能以及扩展功能

下面我将提供一个完整的 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>

还可以实现很多功能

参考网址：md-editor-v3

这个实现提供了完整的Markdown编辑体验，可以直接集成到Vue 3项目中，也可以根据需要进行定制和扩展。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。