在页面里集成 Vditor：三种编辑模式、Markdown 扩展与初始化示例
Vditor 是 B3log 组织开源、基于浏览器的现代 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。
功能特性
三种编辑模式：所见即所得（WYSIWYG）模式可以实现类似 Word 这种富文本编辑器效果；即时渲染（IR）模式让熟悉 Markdown 的用户更专注内容创作；分屏预览（SV）模式适合大屏下编辑排版。
Markdown 支持：支持 CommonMark 和 GFM（GitHub Flavored Markdown）标准，以及大纲、数学公式（LaTeX）、脑图、图表、流程图、甘特图、时序图、五线谱、多媒体、语音阅读、标题锚点、代码高亮及复制、graphviz 渲染、UML 图。代码块支持语法高亮、行号、语言标识和复制功能。
丰富的功能：工具栏提供格式、插入、视图切换等常用操作按钮，可高度自定义；支持多主题、多语言，内置表情和图标选择器；支持本地图片上传，内置 XSS 安全过滤；可导出 PDF、Markdown、HTML，提供图片懒加载、任务列表、多平台预览，并支持复制到微信公众号和知乎。
API 集成：基于 TypeScript 实现，支持原生 JavaScript 以及 Vue、React、Angular 和 Svelte 等框架。
在线体验
官方 Demo 地址：
以下是一个介绍 Markdown 语法的完整示例：
代码集成
安装依赖：
npm install vditor --save
然后在代码中引入并初始化：
import Vditor from 'vditor'
import "~vditor/src/assets/less/index"
const vditor = new Vditor(id, {options...})
如果项目不走打包流程，也可以直接在 HTML 中插入 CSS 和 JavaScript：
具体示例可以参考上面的在线体验。