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 使用指南

---

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