多功能浏览器端 Markdown 编辑器：Vditor

Vditor 是一款基于浏览器的 Markdown 编辑器，旨在为用户提供高效、灵活的文档创作体验。支持所见即所得（富文本）、即时渲染和分屏预览模式，可满足不同场景下的文本编辑需求。Vditor 使用 TypeScript 开发，兼容原生 JavaScript 及主流前端框架，如 Vue、React 和 Angular，同时提供桌面版，为开发者、写作者及教育工作者提供丰富的创作工具和功能扩展。

Vditor是什么？

Vditor 是一个开源的浏览器端 Markdown 编辑器，支持所见即所得编辑、即时渲染和分屏预览模式。它面向开发者、内容创作者以及教育工作者，提供大纲导航、数学公式、脑图、流程图、甘特图、五线谱、多媒体嵌入、语音阅读及代码高亮等功能。Vditor 兼容多种前端框架，方便在网页、桌面端和应用中集成使用。

网站地址：https://b3log.org/vditor

核心功能

Vditor 面向 Markdown 编辑用户，提供强大且多样化的功能：

• 所见即所得编辑——实时呈现文档效果，降低 Markdown 学习成本。
• 即时渲染与分屏预览——可同时查看源代码与渲染效果，提高编辑效率。
• 大纲与标题锚点——支持文档结构导航，方便快速跳转。
• 数学公式与图表——支持 LaTeX 公式、流程图、甘特图、时序图、Graphviz 渲染等。
• 脑图与五线谱——可嵌入思维导图与音乐谱表，丰富文档内容。
• 多媒体支持——支持图片、视频、音频及语音阅读嵌入。
• 代码高亮与复制——多语言代码高亮显示，并可一键复制。
• 框架与桌面支持——兼容 JavaScript、Vue、React、Angular，并提供桌面版。

使用场景

Vditor 可应用于多种文档编辑和创作场景：

操作指南

新用户可在 3 分钟内上手 Vditor：

1. 访问 Vditor 官网或 GitHub 页面下载或引入库。
2. 在网页中引入 JavaScript 或 TypeScript 文件，或使用 Vue/React/Angular 框架集成。
3. 初始化编辑器实例，并设置所需配置，如分屏预览、大纲显示等。
4. 输入 Markdown 内容，使用工具栏快速插入表格、公式、多媒体或图表。
5. 通过即时渲染和分屏预览实时查看文档效果。
6. (注意：复杂功能如脑图和甘特图需要额外依赖支持)

支持平台

Vditor 支持 Web 浏览器端使用，兼容桌面端集成或单独桌面应用，可在 Windows、macOS、Linux 平台浏览器中运行，并支持 Vue、React、Angular 等前端框架。

产品定价

Vditor 为 开源免费 工具，用户可自由使用、修改和集成。

常见问题

Q1：是否需要安装额外软件？
A1：Web 版本只需浏览器即可使用，桌面版提供独立应用。

Q2：是否支持前端框架？
A2：是的，Vditor 可集成到 Vue、React 和 Angular 项目中。

Q3：是否支持多媒体和公式？
A3：支持 LaTeX 数学公式、图片、音频、视频、多媒体嵌入及脑图。

Q4：是否适合新手使用？
A4：支持所见即所得模式和工具栏操作，即使 Markdown 新手也能快速上手。

Q5：是否开源免费？
A5：是的，Vditor 完全开源免费，可在项目中自由使用。

跳跳兔小结

Vditor 是一款功能丰富、易于集成的浏览器端 Markdown 编辑器，兼顾所见即所得和即时渲染需求，适合开发者、内容创作者及教育工作者使用。其支持多种文档扩展功能，如数学公式、脑图、甘特图、五线谱和多媒体嵌入，为文档创作提供高度自由度。对于需要在网页或桌面端快速搭建 Markdown 编辑功能的项目，Vditor 是一个灵活、高效的选择。