React Markdown Editor (react-mde) 使用教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00086/article/details/138702934

React Markdown Editor (react-mde) 使用教程

react-mde 📝 React Markdown Editor 项目地址: https://gitcode.com/gh_mirrors/re/react-mde

1. 项目介绍

react-mde 是一个简单而强大的 React Markdown 编辑器，旨在与 GitHub Markdown 编辑器具有功能对等性。它是一个完全可控的组件，没有任何第三方依赖。react-mde 支持自定义命令、自定义图标、Markdown 预览等功能，适用于需要集成 Markdown 编辑器的 React 项目。

2. 项目快速启动

安装

首先，通过 npm 安装 react-mde：

npm install react-mde

基本使用

以下是一个使用 react-mde 的基本示例，使用 Showdown 进行 Markdown 预览：

import React, { useState } from "react";
import ReactMde from "react-mde";
import * as Showdown from "showdown";
import "react-mde/lib/styles/css/react-mde-all.css";

const converter = new Showdown.Converter({
  tables: true,
  simplifiedAutoLink: true,
  strikethrough: true,
  tasklists: true,
});

export default function App() {
  const [value, setValue] = useState("**Hello world!!!**");
  const [selectedTab, setSelectedTab] = useState<"write" | "preview">("write");

  return (
    <div className="container">
      <ReactMde
        value={value}
        onChange={setValue}
        selectedTab={selectedTab}
        onTabChange={setSelectedTab}
        generateMarkdownPreview={(markdown) =>
          Promise.resolve(converter.makeHtml(markdown))
        }
      />
    </div>
  );
}

自定义图标

你可以通过 getIcon 属性自定义图标：

<ReactMde
  getIcon={(commandName) => <MyCustomIcon name={commandName} />}
  onChange={this.handleValueChange}
/>

3. 应用案例和最佳实践

应用案例

react-mde 可以用于各种需要 Markdown 编辑器的场景，例如：

博客平台：用户可以在博客平台上使用 react-mde 编辑和预览 Markdown 格式的文章。
文档编辑：在文档管理系统中，react-mde 可以用于编辑和预览 Markdown 格式的文档。
评论系统：在评论系统中，用户可以使用 react-mde 编辑和预览 Markdown 格式的评论。

最佳实践

自定义命令：通过自定义命令扩展 react-mde 的功能，满足特定需求。
样式定制：通过覆盖默认样式或使用 SASS 变量，定制 react-mde 的外观。
XSS 防护：在使用 Showdown 进行 Markdown 预览时，注意防范 XSS 攻击，可以使用 showdown-xss-filter 等工具。