Vditor：Markdown 编辑器介绍（推荐）-马育民老师

# 介绍

Vditor 是国内 B3log 社区开源、基于 TypeScript 开发的**浏览器端 Markdown 编辑器**，开源协议 MIT，可以免费商用，主打一套编辑器提供三种完全不同的编辑体验，兼顾 Markdown 老手与完全不懂 Markdown 的普通用户。

### github

https://github.com/Vanessa219/vditor

截止26年8月 11k 星

### 官网

https://b3log.org/vditor/

# 一、三大核心编辑模式

1. **所见即所得 WYSIWYG**
和普通富文本编辑器体验一致，看不到 Markdown 标记符号，直接看到最终排版效果。不懂 Markdown 的普通用户直接上手；同时老手也可以直接输入 Markdown 标记，编辑器自动转成富文本效果，两种操作可以混用。

2. **即时渲染 IR（对标 Typora）**
输入 Markdown 标记后，标记会自动隐去，直接展示渲染后的效果；光标定位到对应位置时标记会重新显现，方便修改。适合重度 Markdown 用户，沉浸式写作，视觉干净，是它区别于很多网页编辑器的亮点。

3. **分屏预览 SV**
左右双栏布局：左边原始 Markdown 源码，右边实时预览渲染效果，双区同步滚动。传统 Markdown 用户常用，适合需要对照源码、精细调整语法的场景。

> 三种模式之间可以随时切换，底层会自动做 Markdown 和富文本的双向转换，不会丢失内容。

# 二、语法与渲染能力
1. 完全兼容 CommonMark、GFM（GitHub Markdown）标准，支持表格、任务列表、删除线、脚注、目录、YAML头部信息等扩展语法。
2. **复杂图表与多媒体**
    - Mermaid：流程图、时序图、甘特图、状态图
    - PlantUML、Graphviz：UML、各类架构图
    - ECharts：各类统计图表
    - Markmap：思维导图
    - KaTeX/MathJax：数学公式，行内、块级公式都支持
    - 五线谱乐谱渲染、音视频嵌入、图片处理。
3. 内置 XSS 安全过滤，防止恶意 HTML 注入；支持代码块语法高亮、一键复制代码。
4. 中文优化：自动在中英文之间补空格、中文标点智能修正，对中文写作友好。

# 三、工具栏与交互能力
- 默认工具栏三十多项功能，支持完全自定义：可以删减按钮、调整顺序、增加自定义按钮、修改图标、配置快捷键、子菜单。
- 内置大量辅助功能：文档大纲导航、自动格式化 Markdown、查看语法树、导出、语音朗读、@提及、表情、复制内容适配公众号/知乎排版、打字机模式。
- 多套主题：编辑器主题、预览内容主题，支持暗色模式，支持多语言切换。
- 图片上传：支持粘贴截图、拖拽图片上传，可对接后端上传接口。

# 四、技术与集成
- 完全运行在浏览器，不需要后端渲染；底层依赖自研 Markdown 解析引擎 Lute。
- 原生 JS 开箱可用，同时适配 Vue、React、Angular、Svelte 各类前端框架；也有独立桌面客户端版本。
- 几乎所有高级功能都可以开关，项目可以按需关闭不需要的图表、公式模块，控制打包体积。

# 五、典型使用场景
1. 博客、论坛、知识库系统：比如 Halo 博客、Sym 社区都采用 Vditor，普通用户富文本写，技术用户写 Markdown。
2. 企业后台、文档平台、笔记系统：兼顾普通办公人员和开发人员。
3. 在线教育平台：支持公式、UML、流程图，适合技术文档、习题编写。
4. 内网系统、私有化部署：MIT协议无版权顾虑。

# 六、优缺点总结
### 优点
1. **三种模式合一**，同一套数据兼容新手和老手，这是最大优势；
2. 图表、公式、思维导图内置能力极强，不用额外拼接很多第三方组件；
3. 对中文环境做专门优化；
4. 配置自由度高，工具栏、功能模块可裁剪；
5. 国产开源，文档、社区中文友好，MIT协议允许商用。

### 局限
1. 整体体积偏大，如果只需要简单Markdown，会比轻量编辑器重；
2. 所见即所得模式下，极端复杂Markdown语法转换偶尔会出现小偏差；
3. 图表类功能依赖第三方库，开启后会进一步增大资源体积。

原文出处：/show_1GW3utEeDWH4.html