Vditor：支持三种编辑模式的浏览器端 Markdown 编辑器

Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得（富文本）、即时渲染（类似 Typora）和分屏预览三种模式。它使用 TypeScript 实现，支持原生 JavaScript 以及 Vue、React、Angular 和 Svelte 等主流框架。截至目前，该项目在 GitHub 上已获得超过 10,000 stars，是现代化 Markdown 编辑领域的优秀开源项目。

项目简介

随着 Markdown 排版方式的普及，越来越多的应用开始集成 Markdown 编辑器。Vditor 应运而生，旨在为不同应用场景提供完美的编辑解决方案。它由 B3log 开源社区开发维护，目前被广泛应用于社区论坛、博客系统、笔记应用等多种产品中。

Vditor 最大的特点是支持三种编辑模式，能够同时满足不同用户群体的需求：

所见即所得模式：对不熟悉 Markdown 的用户友好，可以像使用 Word 一样编辑
即时渲染模式：类似 Typora 的编辑体验，让熟悉 Markdown 的用户专注于内容创作
分屏预览模式：传统的编辑方式，适合大屏下的 Markdown 编辑和排版

核心特性

三种编辑模式

所见即所得（WYSIWYG）：富文本编辑模式，对新手友好
即时渲染（IR）：类似 Typora 的实时渲染体验
分屏预览（SV）：编辑区和预览区分离的传统模式

丰富的语法支持

完整的 CommonMark 和 GFM 规范支持
数学公式（MathJax / KaTeX）
流程图、时序图、甘特图（Mermaid）
图表（ECharts）
脑图（Markmap）
五线谱（abc.js）
Graphviz 图形
PlantUML 图表
多媒体嵌入

强大的工具栏

36+ 项内置操作
支持自定义按钮和快捷键
表情/at/话题自动补全
拖拽和剪贴板上传
语音录制支持
实时保存和字数统计

主题与国际化

内置多套编辑器主题（classic、dark）
内容主题支持（ant-design、light、dark、wechat）
36+ 套代码高亮主题
多语言支持（中、英、韩等 12 种语言）

安装指南

通过 npm 安装

bash

npm install vditor --save

通过 CDN 使用

html

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

在框架中使用

Vditor 支持多种前端框架：

原生 JavaScript
Vue
React
Angular
Svelte

快速开始

基础用法

typescript

import Vditor from 'vditor'
import "~vditor/src/assets/less/index"

const vditor = new Vditor('vditor', {
  height: 360,
  toolbarConfig: {
    pin: true,
  },
  cache: {
    enable: false,
  },
  after: () => {
    vditor.setValue('Hello, Vditor!')
  },
})

HTML 直接引入

html

<div id="vditor"></div>
<script>
  new Vditor('vditor', {
    mode: 'ir', // 可选：sv, ir, wysiwyg
    height: 360,
    value: '# Hello, Vditor!',
  })
</script>

常用配置示例

配置编辑模式

typescript

new Vditor('vditor', {
  mode: 'wysiwyg', // 'sv' | 'ir' | 'wysiwyg'
})

配置工具栏

typescript

new Vditor('vditor', {
  toolbar: [
    'emoji', 'headings', 'bold', 'italic', '|',
    'line', 'quote', 'list', 'ordered-list', 'check', '|',
    'code', 'inline-code', 'upload', 'link', 'table', '|',
    'undo', 'redo', '|',
    'fullscreen', 'edit-mode'
  ],
})

配置上传

typescript

new Vditor('vditor', {
  upload: {
    url: '/api/upload',
    max: 10 * 1024 * 1024, // 10MB
    accept: 'image/*,.mp3,.wav,.rar',
    token: 'your-upload-token',
    multiple: false,
    fieldName: 'file[]',
  },
})

配置预览

typescript

new Vditor('vditor', {
  preview: {
    delay: 1000,
    maxWidth: 800,
    mode: 'both', // 'both' | 'editor'
    markdown: {
      toc: true,
      footnotes: true,
      autoSpace: true,
    },
    theme: {
      current: 'light',
      list: {
        'ant-design': 'Ant Design',
        dark: 'Dark',
        light: 'Light',
        wechat: 'WeChat',
      },
    },
  },
})

API 参考

实例方法

方法	说明
`getValue()`	获取 Markdown 内容
`getHTML()`	获取 HTML 内容
`setValue(markdown)`	设置编辑器内容
`insertValue(value)`	在光标处插入内容
`focus()`	聚焦编辑器
`blur()`	失焦编辑器
`disabled()`	禁用编辑器
`enable()`	启用编辑器
`destroy()`	销毁编辑器
`setTheme(theme)`	设置主题
`getCurrentMode()`	获取当前编辑模式
`clearCache()`	清除缓存

静态方法

用于仅渲染 Markdown 内容的场景：

typescript

// 渲染 Markdown 为 HTML
Vditor.preview(element, markdown, options)

// 渲染代码高亮
Vditor.highlightRender(options, element)

// 渲染数学公式
Vditor.mathRender(element)

// 渲染 Mermaid 图表
Vditor.mermaidRender(element)

// 渲染 ECharts 图表
Vditor.chartRender(element)

// Markdown 转 HTML
Vditor.md2html(markdown, options).then(html => {
  console.log(html)
})

使用案例

Vditor 已被众多知名项目采用：

思源笔记：本地优先的个人知识管理系统
Sym：Java 实现的现代化社区平台
Solo & Pipe：B3log 分布式社区博客端
Arya：基于 Vue 的在线 Markdown 编辑器
Tditor：基于 React 的在线 Markdown 编辑平台

注意事项

CDN 版本：生产环境建议指定版本号，如 https://unpkg.com/vditor@3.11.2/dist/...
按需加载：Vditor 使用按需加载机制，需要配置正确的 CDN 地址
TypeScript：完整支持 TypeScript，提供类型定义文件
移动端：对移动端友好，支持触摸操作
浏览器兼容：支持主流现代浏览器

总结

Vditor 是一款功能丰富、易于集成的浏览器端 Markdown 编辑器。它的三种编辑模式设计巧妙，能够同时满足不同用户群体的需求。无论是需要富文本编辑体验的新手，还是追求极致效率的 Markdown 老手，都能在 Vditor 中找到适合自己的编辑方式。如果你正在寻找一款现代化的 Markdown 编辑器，Vditor 绝对值得一试。

字节笔记本

Vditor：支持三种编辑模式的浏览器端 Markdown 编辑器

项目简介

核心特性

三种编辑模式

丰富的语法支持

强大的工具栏

主题与国际化

安装指南

通过 npm 安装

通过 CDN 使用

在框架中使用

快速开始

基础用法

HTML 直接引入

常用配置示例

配置编辑模式

配置工具栏

配置上传

配置预览

API 参考

实例方法

静态方法

使用案例

注意事项

相关链接

总结