Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript 以及 Vue、React、Angular 和 Svelte 等框架。

背景

随着 Markdown 排版方式的普及，越来越多的应用开始集成 Markdown 编辑器。目前主流可集成的 Markdown 编辑器现状如下：

有的仅支持分屏预览，即编辑区和预览区分离
有的同时支持所见即所得和分屏预览，但所见即所得模式下不能完整支持 Markdown 语法排版
几乎没有类似 Typora 的即时渲染

而这三点恰好对应了三种应用场景：

分屏预览：适配传统的 Markdown 使用场景，适合大屏下编辑排版
所见即所得：对不熟悉 Markdown 的用户友好，熟悉 Markdown 的用户也可以无缝使用
即时渲染：理论上这是最为优雅的 Markdown 编辑方式，让熟悉 Markdown 的用户能够更专注于内容创作

所以，一个能够适配应用场景的 Markdown 编辑器至关重要，它需要考虑到：

传统 Markdown 用户的使用场景，提供分屏预览
富文本编辑用户的使用场景，提供所见即所得
高阶 Markdown 用户的使用场景，提供即时渲染 Vditor 在这些方面做了努力，希望能为现代化的通用 Markdown 编辑领域做出一些贡献。

特性

支持三种编辑模式：所见即所得（wysiwyg）、即时渲染（ir）、分屏预览（sv）
支持大纲、数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、多媒体、语音阅读、标题锚点、代码高亮及复制、graphviz 渲染、plantumlUML 图
导出、图片懒加载、任务列表、多平台预览、多主题切换、复制到微信公众号/知乎功能
实现 CommonMark 和 GFM 规范，可对 Markdown 进行格式化和语法树查看，并支持 10+项配置
工具栏包含 36+ 项操作，除支持扩展外还可对每一项中的快捷键、提示、提示位置、图标、点击事件、类名、子工具栏进行自定义
表情/at/话题等自动补全扩展
可使用拖拽、剪切板粘贴上传，显示实时上传进度，支持 CORS 跨域上传
实时保存内容，防止意外丢失
录音支持，用户可直接发布语音
粘贴 HTML 自动转换为 Markdown，如粘贴中包含外链图片可通过指定接口上传到服务器
支持主窗口大小拖拽、字符计数
多主题支持，内置黑白绿三套主题
多语言支持，内置中、英、韩文本地化
支持主流浏览器，对移动端友好

一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染和分屏预览模式！

编辑模式

所见即所得（WYSIWYG）

所见即所得模式对不熟悉 Markdown 的用户较为友好，熟悉 Markdown 的话也可以无缝使用。

即时渲染（IR）

即时渲染模式对熟悉 Typora 的用户应该不会感到陌生，理论上这是最优雅的 Markdown 编辑方式。

分屏预览（SV）

传统的分屏预览模式适合大屏下的 Markdown 编辑。

语法支持

所有 CommonMark 语法：分隔线、ATX 标题、Setext 标题、缩进代码块、围栏代码块、HTML 块、链接引用定义、段落、块引用、列表、反斜杠转义、HTML 实体、行级代码、强调、加粗、链接、图片、行级 HTML、硬换行、软换行和纯文本。
所有 GFM 语法：表格、任务列表项、删除线、自动链接、XSS 过滤
常用 Markdown 扩展语法：脚注、ToC、自定义标题 ID
图表语法

流程图、时序图、甘特图，通过 Mermaid 支持
Graphviz
折线图、饼图、脑图等，通过 ECharts 支持

五线谱：通过 abc.js 支持
数学公式：数学公式块、行级数学公式，通过 MathJax 和 KaTeX 支持
YAML Front Matter
中文语境优化

中西文之间插入空格
术语拼写修正
中文后跟英文逗号句号等标点替换为中文对应标点以上大部分特性可以通过开关配置是否启用，开发者可根据自己的应用场景选择搭配。

使用文档

CommonJS

安装依赖

npm install vditor --save

在代码中引入并初始化对象，可参考 index.js

https://github.com/Vanessa219/vditor/blob/master/demo/index.js

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

const vditor = new Vditor(id, {options...})

HTML script

在 HTML 中插入 CSS 和 JavaScript，可参考 demo

https://b3log.org/vditor/demo/index.html

<!-- ⚠️生产环境请指定版本号，如 https://unpkg.com/vditor@x.x.x/dist... -->
<link rel="stylesheet" href="https://unpkg.com/vditor/dist/index.css" />
<script src="https://unpkg.com/vditor/dist/index.min.js"></script>