Vditor 终极配置指南：快速上手浏览器端 Markdown 编辑器

Vditor 是一款强大的浏览器端 Markdown 编辑器，支持所见即所得（富文本）、即时渲染（类似 Typora）和分屏预览三种核心编辑模式。作为一款开源项目，Vditor 提供了丰富的配置选项和扩展功能，让用户能够轻松创建专业的文档内容。

🚀 快速安装与引入

Vditor 的安装非常简单，可以通过多种方式快速引入到你的项目中：

npm 安装

npm install vditor --save

CDN 引入

<link rel="stylesheet" href="https://unpkg.com/vditor/dist/index.css" />
<script src="https://unpkg.com/vditor/dist/index.min.js"></script>

## ⚙️ 基础配置选项详解

Vditor 提供了丰富的配置参数，让你能够自定义编辑器的外观和行为：

**核心配置示例**
```javascript
const vditor = new Vditor('vditor', {
  height: 500,
  mode: 'sv', // 分屏预览模式
  toolbar: ['emoji', 'headings', 'bold', 'italic', 'strike', 'link', '|', 'list', 'ordered-list', 'check', 'outdent', 'indent']
})

编辑模式配置

Vditor 支持三种主要的编辑模式：

• 所见即所得模式：类似传统富文本编辑器
• 即时渲染模式：类似 Typora 的编辑体验
• 分屏预览模式：编辑区与预览区分屏显示

🎨 主题与样式定制

Vditor 内置了多种主题和样式选项，让你的编辑器更加个性化：

内容主题选择 Vditor 提供了多种内置主题，包括：

• 浅色主题 (light.css)
• 深色主题 (dark.css)
• 微信主题 (wechat.css)
• Ant Design 主题 (ant-design.css)

🔧 高级功能配置

代码高亮配置

Vditor 集成了 Highlight.js，支持超过 200 种代码高亮主题。你可以在 src/js/highlight.js/styles/ 目录中找到所有可用的主题文件。

数学公式渲染

通过集成 KaTeX 和 MathJax，Vditor 能够完美渲染数学公式：

math: {
  engine: 'KaTeX', // 或 'MathJax'
  inlineDigit: true
}

📊 图表与流程图支持

Vditor 集成了多种图表渲染引擎：

• Mermaid：流程图、时序图、甘特图
• ECharts：数据可视化图表
• Flowchart.js：流程图绘制
• Graphviz：图形可视化

🛠️ 实用配置技巧

工具栏自定义

你可以完全自定义工具栏的按钮和布局：

toolbar: [
  'emoji', 'headings', 'bold', 'italic', 'strike', 'link',
  '|', 'list', 'ordered-list', 'check',
  '|', 'code', 'inline-code', 'code-block'
]

上传功能配置

Vditor 支持文件上传功能，可以轻松配置到你的后端服务：

upload: {
  url: '/api/upload',
  accept: 'image/*',
  multiple: false
}

💡 最佳实践建议

1. 选择合适的编辑模式：根据用户习惯选择最适合的编辑体验
2. 主题一致性：确保编辑器主题与你的网站设计风格匹配
3. 性能优化：按需加载所需的渲染引擎和插件
4. 移动端适配：配置响应式布局，确保在移动设备上的良好体验

🔍 常见问题解决

Q: 如何切换编辑模式？ A: 通过配置项的 mode 参数进行设置，可选值：'wysiwyg', 'ir', 'sv'

Q: 如何自定义代码高亮主题？ A: 在 src/js/highlight.js/styles/ 中选择合适的主题文件

通过本指南，你应该已经掌握了 Vditor 的核心配置方法和使用技巧。这款强大的浏览器端 Markdown 编辑器将极大提升你的文档创作效率！✨