介绍
Vditor 是国内 B3log 社区开源、基于 TypeScript 开发的浏览器端 Markdown 编辑器，开源协议 MIT，可以免费商用，主打一套编辑器提供三种完全不同的编辑体验，兼顾 Markdown 老手与完全不懂 Markdown 的普通用户。
github
https://github.com/Vanessa219/vditor
截止26年8月 11k 星
官网
一、三大核心编辑模式
所见即所得 WYSIWYG
和普通富文本编辑器体验一致，看不到 Markdown 标记符号，直接看到最终排版效果。不懂 Markdown 的普通用户直接上手；同时老手也可以直接输入 Markdown 标记，编辑器自动转成富文本效果，两种操作可以混用。即时渲染 IR（对标 Typora）
输入 Markdown 标记后，标记会自动隐去，直接展示渲染后的效果；光标定位到对应位置时标记会重新显现，方便修改。适合重度 Markdown 用户，沉浸式写作，视觉干净，是它区别于很多网页编辑器的亮点。分屏预览 SV
左右双栏布局：左边原始 Markdown 源码，右边实时预览渲染效果，双区同步滚动。传统 Markdown 用户常用，适合需要对照源码、精细调整语法的场景。
三种模式之间可以随时切换，底层会自动做 Markdown 和富文本的双向转换，不会丢失内容。
二、语法与渲染能力
- 完全兼容 CommonMark、GFM（GitHub Markdown）标准，支持表格、任务列表、删除线、脚注、目录、YAML头部信息等扩展语法。
- 复杂图表与多媒体
- Mermaid：流程图、时序图、甘特图、状态图
- PlantUML、Graphviz：UML、各类架构图
- ECharts：各类统计图表
- Markmap：思维导图
- KaTeX/MathJax：数学公式，行内、块级公式都支持
- 五线谱乐谱渲染、音视频嵌入、图片处理。
- 内置 XSS 安全过滤，防止恶意 HTML 注入；支持代码块语法高亮、一键复制代码。
- 中文优化：自动在中英文之间补空格、中文标点智能修正，对中文写作友好。
三、工具栏与交互能力
- 默认工具栏三十多项功能，支持完全自定义：可以删减按钮、调整顺序、增加自定义按钮、修改图标、配置快捷键、子菜单。
- 内置大量辅助功能：文档大纲导航、自动格式化 Markdown、查看语法树、导出、语音朗读、@提及、表情、复制内容适配公众号/知乎排版、打字机模式。
- 多套主题：编辑器主题、预览内容主题，支持暗色模式，支持多语言切换。
- 图片上传：支持粘贴截图、拖拽图片上传，可对接后端上传接口。
四、技术与集成
- 完全运行在浏览器，不需要后端渲染；底层依赖自研 Markdown 解析引擎 Lute。
- 原生 JS 开箱可用，同时适配 Vue、React、Angular、Svelte 各类前端框架；也有独立桌面客户端版本。
- 几乎所有高级功能都可以开关，项目可以按需关闭不需要的图表、公式模块，控制打包体积。
五、典型使用场景
- 博客、论坛、知识库系统：比如 Halo 博客、Sym 社区都采用 Vditor，普通用户富文本写，技术用户写 Markdown。
- 企业后台、文档平台、笔记系统：兼顾普通办公人员和开发人员。
- 在线教育平台：支持公式、UML、流程图，适合技术文档、习题编写。
- 内网系统、私有化部署：MIT协议无版权顾虑。
六、优缺点总结
优点
- 三种模式合一，同一套数据兼容新手和老手，这是最大优势；
- 图表、公式、思维导图内置能力极强，不用额外拼接很多第三方组件；
- 对中文环境做专门优化；
- 配置自由度高，工具栏、功能模块可裁剪；
- 国产开源，文档、社区中文友好，MIT协议允许商用。
局限
- 整体体积偏大，如果只需要简单Markdown，会比轻量编辑器重；
- 所见即所得模式下，极端复杂Markdown语法转换偶尔会出现小偏差；
- 图表类功能依赖第三方库，开启后会进一步增大资源体积。