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

---

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