React Markdown 编辑器使用教程

项目介绍

React Markdown 编辑器是一个基于 React.js 和 TypeScript 实现的开源 Markdown 编辑器组件。它允许用户在浏览器中自然地编写 Markdown 文档，类似于在 Google Docs 或 Notion 中的体验。该编辑器支持实时预览，即所见即所得（WYSIWYG）模式，并且可以自定义样式和工具栏。

项目快速启动

安装

首先，通过 npm 安装 React Markdown 编辑器：

npm install @uiw/react-md-editor

基本使用

以下是一个简单的示例，展示如何在 React 项目中使用该编辑器：

import React, { useState } from 'react';
import MDEditor from '@uiw/react-md-editor';

export default function App() {
  const [value, setValue] = useState("**Hello world!!!**");
  return (
    <div className="container">
      <MDEditor
        value={value}
        onChange={setValue}
      />
    </div>
  );
}

应用案例和最佳实践

自定义工具栏

你可以通过自定义工具栏来添加或移除某些功能按钮。以下是一个示例：

import React, { useState } from 'react';
import MDEditor, { commands } from '@uiw/react-md-editor';

export default function App() {
  const [value, setValue] = useState("Hello Markdown!");
  return (
    <div className="container">
      <MDEditor
        value={value}
        onChange={setValue}
        preview="edit"
        commands={[
          commands.bold,
          commands.italic,
          commands.divider,
          commands.link,
          commands.code,
        ]}
      />
    </div>
  );
}

样式定制

你可以通过 CSS 类来定制编辑器的样式：

import React, { useState } from 'react';
import MDEditor from '@uiw/react-md-editor';

export default function App() {
  const [value, setValue] = useState("Hello Markdown!");
  return (
    <div className="container">
      <MDEditor
        value={value}
        onChange={setValue}
        className="my-custom-editor"
      />
    </div>
  );
}

.my-custom-editor .w-md-editor-text-pre > code {
  font-size: 18px !important;
  line-height: 22px !important;
}

典型生态项目

React Markdown 编辑器可以与许多其他 React 生态项目结合使用，例如：

• Next.js: 可以在 Next.js 项目中无缝使用该编辑器。
• Material-UI: 结合 Material-UI 组件库，可以进一步增强编辑器的外观和交互体验。
• Redux: 可以将编辑器的状态管理集成到 Redux 中，实现更复杂的状态管理需求。

通过这些生态项目的结合，可以构建出功能强大且美观的 Markdown 编辑器应用。