md-editor-v3 使用指南与实战：特性、安装、集成与性能优化

npm i md-editor-v3

yarn add md-editor-v3

pnpm add md-editor-v3

// main.ts
import { createApp } from 'vue'
import App from './App.vue'

// 必须：样式
import 'md-editor-v3/lib/style.css'

createApp(App).mount('#app')

<!-- App.vue -->
<template>
  <div class="container">
    <MdEditor
      v-model="text"
      theme="light"
      previewTheme="github"
      codeTheme="github"
      @onSave="handleSave"
      :onUploadImg="onUploadImg"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import MdEditor from 'md-editor-v3'

const text = ref('# Hello md-editor-v3 👋\n\n- 支持实时预览\n- 支持图片上传\n- 支持快捷键（如 Ctrl+S 保存）')

function handleSave(v: string, html: string) {
  console.log('保存内容：', v)
  console.log('渲染 HTML：', html)
  localStorage.setItem('post.md', v)
}

const onUploadImg = async (files: File[], callback: (urls: string[]) => void) => {
  // 示例：本地预览；生产中应将 files 上传到服务器后返回可访问的 URL 列表
  const urls = files.map((f) => URL.createObjectURL(f))
  callback(urls)
}

onMounted(() => {
  const cached = localStorage.getItem('post.md')
  if (cached) text.value = cached
})
</script>

<style scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
</style>

npm run dev
# 或 yarn dev / pnpm dev

<MdEditor v-model="text" previewTheme="vuepress" codeTheme="atom" />

<MdEditor v-model="text" @onSave="(v) => saveToServer(v)" />

async function saveToServer(content: string) {
  // POST 到服务端
  await fetch('/api/save', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ content }),
  })
}

const onUploadImg = async (files: File[], callback: (urls: string[]) => void) => {
  // 这里演示本地预览；生产中请将文件上传后返回可外链访问的 URL
  const urls = await Promise.all(
    files.map(async (file) => {
      // 例如：上传到 OSS 后返回 url
      // const url = await uploadToOSS(file)
      // return url
      return URL.createObjectURL(file)
    }),
  )
  callback(urls)
}

<script setup lang="ts">
import { ref } from 'vue'
import MdEditor from 'md-editor-v3'

const text = ref('# 自定义工具栏与主题')
const toolbars = [
  'bold',
  'italic',
  'strikeThrough',
  'title',
  'underline',
  'quote',
  'list',
  'code',
  'image',
  'link',
  'preview',
  'save',
] as const
</script>

<template>
  <MdEditor
    v-model="text"
    theme="dark"
    previewTheme="github"
    codeTheme="monokai"
    :toolbars="toolbars"
    :toolbarsExclude="['github']"
  />
</template>

:root {
  /* 示例变量名，仅作演示 */
  --md-color-primary: #2f54eb;
  --md-border-color: #e5e7eb;
}

<script setup lang="ts">
import { ref } from 'vue'
import { MdPreview } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'

const content = ref(`# 仅预览模式

- 适合文章详情页
- 支持目录、表格、代码高亮等
`)
</script>

<template>
  <MdPreview :modelValue="content" previewTheme="github" codeTheme="github" />
</template>

// plugins/md-editor.client.ts
import 'md-editor-v3/lib/style.css'

<!-- pages/editor.vue -->
<template>
  <ClientOnly>
    <MdEditor v-model="text" />
  </ClientOnly>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import MdEditor from 'md-editor-v3'
const text = ref('# Nuxt 3 + md-editor-v3')
</script>

npm i md-editor-rt
# 或 yarn add md-editor-rt / pnpm add md-editor-rt

// App.tsx
import React, { useState } from 'react'
import MdEditor from 'md-editor-rt'
import 'md-editor-rt/lib/style.css'

export default function App() {
  const [text, setText] = useState('# Hello md-editor-rt')

  const onUploadImg = async (files: File[], callback: (urls: string[]) => void) => {
    const urls = files.map((f) => URL.createObjectURL(f))
    callback(urls)
  }

  return (
    <MdEditor
      modelValue={text}
      onChange={setText}
      onSave={(v, html) => console.log('save', v)}
      onUploadImg={onUploadImg}
      theme="light"
      previewTheme="github"
      codeTheme="github"
    />
  )
}

// pages/editor.tsx
import dynamic from 'next/dynamic'
import 'md-editor-rt/lib/style.css'
import React, { useState } from 'react'

const MdEditor = dynamic(() => import('md-editor-rt'), { ssr: false })

export default function EditorPage() {
  const [text, setText] = useState('# Next.js + md-editor-rt')
  return <MdEditor modelValue={text} onChange={setText} />
}

let mermaidReady = false
async function ensureMermaid() {
  if (!mermaidReady) {
    await import('mermaid') // 或使用 CDN
    mermaidReady = true
  }
}