Vditor：浏览器端Markdown编辑器，提升Markdown编辑体验

Vditor（浏览器端Markdown编辑器）简介

Vditor是一个 浏览器端的 Markdown 编辑器，支持所见即所得（WYSIWYG）、即时渲染（类似 Typora）和分屏预览模式，初学者都能轻松上手。

• 所见即所得模式为不熟悉 Markdown 的用户提供了友好的体验，同时也允许熟悉 Markdown 的用户无缝切换。
• 即时渲染模式则为那些喜欢专注于内容创作的用户提供了优雅的编辑方式。
• 分屏预览模式则适合于大屏设备，方便用户在编辑和预览之间快速切换。

主要特色功能

• 支持大纲、数学公式、流程图等多种格式，可以轻松创建复杂的文档。
• 实现了 CommonMark 和 GitHub Flavored Markdown（GFM）规范，确保用户的 Markdown 文档能够在不同平台上无缝兼容。
• 支持自定义工具栏，支持多种主题切换，满足不同用户的需求。
• 实时保存功能可以防止意外丢失，确保用户的创作过程顺畅无阻。
• 支持多语言的界面设计。

Vditor（浏览器端Markdown编辑器）官网

• 开源地址：https://github.com/Vanessa219/vditor
• 官网：https://b3log.org/vditor/

适应不同的应用场景，提供多种编辑模式和丰富的功能，无论是写博客、撰写技术文档，还是进行学术研究，都能提供强有力的支持。

安装步骤

1、使用 npm 安装：

如果使用 Node.js 和 npm，可以通过以下命令安装：

npm install vditor --save

2、如果不想使用 npm，可以直接在 HTML 文件中引入 Vditor 的 CDN：

<link rel="stylesheet" href="https://unpkg.com/vditor/dist/index.css" />
<script src="https://unpkg.com/vditor/dist/index.min.js"></script>

2、初始化 Vditor

在你的 HTML 文件中，创建一个用于 Vditor 的容器：

<div id="vditor"></div>

接着，在 JavaScript 中初始化 Vditor：

const vditor = new Vditor('vditor', {
    height: 400, // 设置编辑器高度
    placeholder: '在这里输入内容...', // 设置输入提示
    toolbar: ['emoji', 'bold', 'italic', '|', 'preview'], // 自定义工具栏
});