B3log 的 Vditor 编辑器有哪些功能特点?

更新时间

Vditor 是 B3log 开源的一款浏览器端 Markdown 编辑器，核心特点是“三种编辑模式 + TypeScript 实现 + 多框架支持 + 丰富的扩展语法渲染”。它适合需要在网页中嵌入 Markdown 写作能力、又希望兼顾普通用户（所见即所得）和开发者（分屏预览、即时渲染）的场景。如果你的项目只需要一个轻量纯文本框，Vditor 的功能面偏重；如果需要在浏览器里完成带图表、公式、脑图的技术写作，它更对路。

三种编辑模式对应不同使用习惯

根据 B3log 官网对 Vditor 的介绍，它支持三种模式：

模式 体验特征 适合谁
所见即所得 输入即呈现最终排版，不显示 Markdown 标记 不熟悉 Markdown 语法的普通用户
即时渲染 类似 Typora，边写边渲染，光标处保留源码感 习惯 Typora 的写作者
分屏预览 左侧源码、右侧预览 需要精确控制语法的开发者

这意味着同一个编辑器组件可以通过配置切换成面向不同人群的形态，而不必为“普通用户版”和“开发者版”分别选型。

技术实现与框架支持

Vditor 使用 TypeScript 实现。官网明确列出它支持原生 JavaScript，以及 Vue、React、Angular 和 Svelte 等框架。对前端团队的实际意义是：无论现有项目用哪种框架，通常都能找到对应的接入方式，不需要为编辑器单独更换技术栈。

扩展语法与内容能力

官网列出的支持项包括：

  • 结构化内容：大纲、标题锚点
  • 图形与图表：脑图、图表、流程图、甘特图、时序图、五线谱、graphviz 渲染
  • 学术写作：数学公式
  • 代码相关：代码高亮及复制
  • 多媒体与辅助：多媒体插入、语音阅读

这些能力决定了 Vditor 的定位不只是“把 Markdown 转成 HTML”，而是把技术文档中常见的图表、公式、流程图直接写进 Markdown 文本里并在浏览器端渲染。例如需要写一篇包含接口时序图和部署流程图的开发文档时，可以直接在编辑器内完成，不必切换到独立的绘图工具再贴图。

怎么判断是否适合你

可以按以下条件对照：

  • 适合：产品需要内嵌 Markdown 编辑能力；用户群体混合（既有非技术用户也有开发者）；文档中需要公式、流程图、脑图等扩展内容；项目使用 Vue/React/Angular/Svelte 或原生 JS。
  • 需要再评估：只想要极简纯文本输入；对包体积敏感且不需要扩展语法；团队不接受 TypeScript 生态。

官网提供了 Vditor 的“体验 / 源码 / 官网”入口，建议先在实际浏览器中试三种模式的手感，再决定接入方式。具体集成步骤、配置项和版本信息以官网与源码仓库为准，本文不代为推断。