快捷導(dǎo)航

Vue3使用md-editor-v3的實例解讀markdown文本

更新時間：2026年01月12日 09:50:31 作者：csdn_HPL

本文介紹了如何在Vue3項目中使用md-editor-v3實現(xiàn)Markdown編輯器,包括基礎(chǔ)實現(xiàn)、工具欄自定義、預(yù)覽功能以及擴(kuò)展功能

1. 基礎(chǔ)實現(xiàn)

安裝依賴

npm install md-editor-v3

也可以是pnpm安裝

pnpm install md-editor-v3

基礎(chǔ)編輯器組件 (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>

自定義工具欄

根據(jù) md-editor-v3 的文檔，以下是完整的工具欄參數(shù)列表：

const toolbars = [
  'bold',          // 加粗
  'underline',     // 下劃線
  'italic',        // 斜體
  'strikeThrough', // 刪除線
  'title',         // 標(biāo)題
  'sub',           // 下標(biāo)
  'sup',           // 上標(biāo)
  'quote',         // 引用
  'unorderedList', // 無序列表
  'orderedList',   // 有序列表
  'task',          // 任務(wù)列表
  'codeRow',       // 行內(nèi)代碼
  'code',          // 代碼塊
  'link',          // 鏈接
  'image',         // 圖片
  'table',         // 表格
  'mermaid',       // Mermaid圖表
  'katex',         // 數(shù)學(xué)公式
  'revoke',        // 撤銷
  'next',          // 重做
  'save',          // 保存
  '=',             // 等寬
  'pageFullscreen',// 頁面全屏
  'fullscreen',    // 全屏
  'preview',       // 預(yù)覽
  'htmlPreview',   // HTML預(yù)覽
  'catalog',       // 目錄
  '-'              // 分隔符
]

您可以根據(jù)需要自由組合這些參數(shù)來定制工具欄。

參考以下示例

<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', // 標(biāo)題
  'sub', // 下標(biāo)
  'sup', // 上標(biāo)
  'quote', // 引用
  '-', // 分隔符
  'unorderedList', // 無序列表
  'orderedList', // 有序列表
  'task', // 任務(wù)列表
  '-', // 分隔符
  'codeRow', // 行內(nèi)代碼
  'code', // 代碼塊
  'link', // 鏈接
  'image', // 圖片
  'table', // 表格
  '_', // 分隔符
  'mermaid', // Mermaid圖表
  'katex', // 數(shù)學(xué)公式
  'revoke', // 撤銷
  'next', // 重做
  'save', // 保存
  '=', // 等寬
  '-', // 分隔符
  'pageFullscreen', // 頁面全屏
  'fullscreen', // 全屏
  'preview', // 預(yù)覽
  'htmlPreview', // HTML預(yù)覽
  'catalog', // 目錄
]
</script>

<template>
  <MdEditor v-model="text" :toolbars="toolbars" />
</template>

2. 預(yù)覽功能

預(yù)覽組件 (<MdPreview.vue)

MdPreview是 文章預(yù)覽
MdCatalog是目錄預(yù)覽

<template>
	<!-- 文章預(yù)覽 -->
  <MdPreview :id="id" :modelValue="text" />
  <!-- 目錄預(yù)覽 -->
  <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>

還可以實現(xiàn)很多功能

參考網(wǎng)址：md-editor-v3

這個實現(xiàn)提供了完整的Markdown編輯體驗，可以直接集成到Vue 3項目中，也可以根據(jù)需要進(jìn)行定制和擴(kuò)展。