【亲测免费】 Vue Markdown Editor 教程

1. 项目介绍

Vue Markdown Editor 是一个基于 Vue.js 构建的 Markdown 编辑器组件。它提供了轻量级和进阶两种版本，适用于不同的开发需求。轻量版利用 textarea 实现，简洁但不支持复杂的编辑功能。而进阶版则提供更多的扩展可能性，如代码高亮、目录导航等。此外，项目还集成了预览组件，方便实时查看编辑结果。

2. 项目快速启动

安装依赖

对于 Vue 3 项目，可以使用以下命令安装 Vue Markdown Editor:

npm install @kangc/v-md-editor@next
# 或者使用 Yarn
yarn add @kangc/v-md-editor@next

引入并注册组件

在你的 Vue 应用中，你需要导入并注册 VueMarkdownEditor 组件：

import { createApp } from 'vue'
import VMdEditor from '@kangc/v-md-editor'
import '@kangc/v-md-editor/lib/style/base-editor.css'
// 引入主题样式
import '@kangc/v-md-editor/lib/theme/style/vuepress.css'

const app = createApp(/* ... */)
app.use(VMdEditor)

使用组件

在模板中，你可以这样使用 VueMarkdownEditor：

<template>
  <v-md-editor v-model="text" height="400px"></v-md-editor>
</template>

<script>
export default {
  data() {
    return {
      text: ''
    }
  }
}
</script>

3. 应用案例和最佳实践

• 自定义工具栏：你可以通过配置 toolbar 属性来自定义编辑器顶部的工具栏，以满足特定功能需求。
• 图片上传处理：可以监听 image-upload 事件，实现自定义图片上传逻辑，比如调用第三方 API 存储图片。
• 安全性：确保使用 xssRules 属性定制安全策略，防止 XSS 攻击。
• 代码高亮：通过扩展代码高亮插件，支持更多编程语言的代码块展示。

4. 典型生态项目

• vuepress-plugin-container：用于在 VuePress 中添加自定义容器，增强文档表现力。
• markdown-it-katex：支持 LaTeX 公式输入，增加数学公式编辑能力。
• markdown-it-table-of-contents：生成 TOC 目录，方便读者浏览长篇文章结构。

以上是关于 Vue Markdown Editor 的基础教程，更多信息和具体用法可以参考其官方文档。