React 展示Markdown内容
Vditor：一款功能强大的前端 Markdown 编辑器
前言
在开发知识库系统时，选择一款合适的 Markdown 编辑器至关重要。经过调研和对比，我最终选择了 Vditor，这是一款功能全面且适用于多种前端框架的 Markdown 编辑器。无论是 Vue、React 还是 jQuery，Vditor 都能轻松集成。本文将详细介绍 Vditor 的基本用法，并分享一些实际开发中的经验。
Vditor 的优点
Vditor 的官方描述是：“易于使用的 Markdown 编辑器，为适配不同的应用场景而生。” 其核心优势包括：
- 跨框架支持：适用于 Vue、React、jQuery 等主流前端框架。
- 功能全面：支持多种编辑模式、代码高亮、图片上传、主题切换等。
- 高度可定制：工具栏、主题、上传配置等均可自定义。
- 性能优异：支持实时保存、懒加载、多平台预览等功能。
基本用法
以下以 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 还支持以下高级功能：
- 多种编辑模式：所见即所得（wysiwyg）、即时渲染（ir）、分屏预览（sv）。
- 扩展功能：数学公式、脑图、流程图、甘特图、时序图等。
- 多主题支持：内置黑白绿三套主题，支持自定义。
- 多语言支持：内置中、英、韩文本地化。
- 实时保存：防止内容丢失。
注意事项
在使用 Vditor 时，需注意以下问题：
- CDN 依赖：Vditor 依赖一个外网 CDN（
lute.min.js），建议自建 CDN 以避免服务中断。 - 自定义配置：根据项目需求灵活配置工具栏、上传功能等。
总结
Vditor 是一款功能强大且易于集成的 Markdown 编辑器，适用于多种前端框架和场景。无论是编辑还是展示 Markdown 内容，Vditor 都能提供良好的支持。如果你有类似需求，强烈推荐尝试 Vditor。
内容来源：Vditor 使用指南
希望本文对你有所帮助！如果有任何问题或建议，欢迎留言讨论。