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 等框架。

在线体验

Vditor 官方提供了大量使用示例，地址如下：

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

以下是一个介绍 Markdown 语法的完整示例：

https://ld246.com/guide/markdown

代码集成

如果想要在自己的程序中集成 Vditor 编辑器，首先需要安装依赖:

npm install vditor --save

然后在代码中引入并初始化对象：

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

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

另外一种方法就是在 HTML 中插入 CSS 和 JavaScript：

<!-- ⚠️生产环境请指定版本号，如 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>

具体示例可以参考上面的在线体验。