React 展示Markdown内容 - 教程

Vditor：一款功能强大的前端 Markdown 编辑器

前言

在开发知识库系统时，选择一款合适的 Markdown 编辑器至关重要。经过调研和对比，我最终选择了 Vditor，这是一款功能全面且适用于多种前端框架的 Markdown 编辑器。无论是 Vue、React 还是 jQuery，Vditor 都能轻松集成。本文将详细介绍 Vditor 的基本用法，并分享一些实际开发中的经验。

---

Vditor 的优点

Vditor 的官方描述是：“易于使用的 Markdown 编辑器，为适配不同的应用场景而生。” 其核心优势包括：

1. 跨框架支持：适用于 Vue、React、jQuery 等主流前端框架。
2. 功能全面：支持多种编辑模式、代码高亮、图片上传、主题切换等。
3. 高度可定制：工具栏、主题、上传配置等均可自定义。
4. 性能优异：支持实时保存、懒加载、多平台预览等功能。

---

基本用法

以下以 Vue 2.x 项目为例，介绍 Vditor 的安装和基本使用。

1. 安装依赖

通过 npm 安装 Vditor：

npm install vditor --save

2. 引入并初始化

在 Vue 组件中引入 Vditor 及其样式文件：

import Vditor from 'vditor';
import 'vditor/dist/index.css';
// 或者使用官方推荐的引入方式

3. 初始化编辑器

在组件中初始化 Vditor：

<template><div id="markdownDocument" /></template><script>export default {mounted() {const wikiContent = '';// 从后端接口获取的文章内容const editDocument = document.getElementById('markdownDocument');this.articleEditor = new Vditor(editDocument, {height: 600,mode: 'sv', // 分屏预览模式preview: {theme: { current: 'classic'}, // 设置内容主题hljs: { style: 'dracula'}, // 设置代码块主题},toolbarConfig: { pin: true}, // 工具栏配置upload: {url: 'article/uploadImage', // 图片上传地址accept: 'image/*',fieldName: 'file',token: 'test',multiple: false,filename(name) {return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').replace('/\\s/g', '');},format(files, responseText) {const res = JSON.parse(responseText);const name = files[0].name;const url = res.data;return JSON.stringify({code: 0,data: { errFiles: '', succMap: {[name]: url}},});},},toolbar: ['emoji', 'headings', 'bold', 'italic', 'strike', '|', 'line', 'quote', 'list', 'ordered-list','check', 'outdent', 'indent', 'code', 'inline-code', 'insert-after', 'insert-before', 'undo','redo', { name: 'upload', tip: '上传图片'}, 'link', 'table', 'edit-mode', 'both', 'preview', 'fullscreen','outline', 'code-theme', 'export', 'devtools', 'br',],cache: { enable: false},after: () =>{this.articleEditor.setValue(wikiContent);// 设置初始内容},});},};</script>

---

仅展示 Markdown 内容

如果只需展示 Markdown 内容而不需要编辑功能，可以使用以下两种方式：

方式一：引入 method.min

import VditorPreview from 'vditor/dist/method.min';
<template><div id="viewDoc" /></template><script>export default {mounted() {const content = '# 标题 正文';// 后端返回的 Markdown 内容const viewDoc = document.getElementById('viewDoc');VditorPreview.preview(viewDoc, content, {theme: { current: 'light'}, // 设置主题hljs: { style: 'github'}, // 设置代码块样式});},};</script>

方式二：使用 md2html

import { md2html
} from 'vditor';
const htmlContent = md2html(mdText, options);

---

高级功能

Vditor 还支持以下高级功能：

1. 多种编辑模式：所见即所得（wysiwyg）、即时渲染（ir）、分屏预览（sv）。
2. 扩展功能：数学公式、脑图、流程图、甘特图、时序图等。
3. 多主题支持：内置黑白绿三套主题，支持自定义。
4. 多语言支持：内置中、英、韩文本地化。
5. 实时保存：防止内容丢失。

---

注意事项

在使用 Vditor 时，需注意以下问题：

1. CDN 依赖：Vditor 依赖一个外网 CDN（lute.min.js），建议自建 CDN 以避免服务中断。
2. 自定义配置：根据项目需求灵活配置工具栏、上传功能等。

---

总结

Vditor 是一款功能强大且易于集成的 Markdown 编辑器，适用于多种前端框架和场景。无论是编辑还是展示 Markdown 内容，Vditor 都能提供良好的支持。如果你有类似需求，强烈推荐尝试 Vditor。

内容来源：Vditor 使用指南

---

希望本文对你有所帮助！如果有任何问题或建议，欢迎留言讨论。