React Markdown 编辑器使用教程

React Markdown 编辑器使用教程

1. 项目介绍

React Markdown 编辑器是一个功能强大的开源 Markdown 编辑器，基于 React.js 和 TypeScript 实现。它支持实时预览、自定义工具栏、代码高亮等特性，使得编写 Markdown 文档变得更为便捷和高效。

2. 项目快速启动

首先，确保您的系统中已安装 Node.js 和 npm。

安装依赖

git clone https://github.com/uiwjs/react-markdown-editor.git
cd react-markdown-editor
npm install

启动开发服务器

npm start

这将在本地启动一个开发服务器，并通过默认的网络浏览器打开编辑器界面。

3. 应用案例和最佳实践

以下是一个简单的应用案例，展示了如何在 React 组件中使用 Markdown 编辑器。

基本使用

import React from 'react';
import MarkdownEditor from '@uiw/react-markdown-editor';

const mdStr = `# 这是一级标题
## 这是二级标题
###### 这是六级标题`;

const App = () => (
  <MarkdownEditor
    value={mdStr}
    onChange={(value, viewUpdate) => {}}
  />
);

export default App;

受控组件

import React, { useState } from 'react';
import MarkdownEditor from '@uiw/react-markdown-editor';

const mdStr = `# 这是一级标题
## 这是二级标题
###### 这是六级标题`;

export default function App() {
  const [markdown, setMarkdown] = useState(mdStr);

  return (
    <MarkdownEditor
      value={markdown}
      height="200px"
      onChange={(value, viewUpdate) => setMarkdown(value)}
    />
  );
}

自定义工具栏

import React from 'react';
import MarkdownEditor from '@uiw/react-markdown-editor';

const title2 = {
  name: 'title2',
  keyCommand: 'title2',
  button: { 'aria-label': '添加标题文本' },
  icon: (
    <svg width="12" height="12" viewBox="0 0 512 512">
      <path fill="currentColor" d="M496 80V48c0-8.837-7.163-16-16-16H320c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h37.621v128H154.379V96H192c8.837 0 16-7.163 16-16V48c0-8.837-7.163-16-16-16H32c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h37.275v320H32c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h160c8.837 0 16-7.163 16-16v-32c0-8.837-7.163-16-16-16h-37.621V288H357.62v128H320c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h160c8.837 0 16-7.163 16-16v-32c0-8.837-7.163-16-16-16h-37.275V96H480c8.837 0 16-7.163 16-16z" />
    </svg>
  ),
  execute: ({ state, view }) => {
    if (!state || !view) return;
    const lineInfo = view.state.doc.lineAt(view.state.selection.main.from);
    let mark = '#';
    const matchMark = lineInfo.text.match(/^#+/);
    if (matchMark && matchMark[0]) {
      const txt = matchMark[0];
      if (txt.length < 6) {
        mark = txt + '#';
      }
    }
    if (mark.length > 6) {
      mark = '#';
    }
    const title = lineInfo.text.replace(/^#+/, '');
    view.dispatch({
      changes: {
        from: lineInfo.from,
        to: lineInfo.to,
        insert: `${mark}${title}`,
      },
      // selection: EditorSelection.range(lineInfo.from + mark.length, lineInfo.to),
      selection: {
        anchor: lineInfo.from + mark.length,
      },
    });
  },
};

const App = () => (
  <MarkdownEditor
    value="Hello Markdown!"
    height="200px"
    toolbars={[ 'bold', title2 ]}
  />
);

export default App;

4. 典型生态项目

React Markdown 编辑器可以与 Next.js 等现代前端框架无缝集成，以下是在 Next.js 项目中使用编辑器的示例。

Next.js 集成

1. 安装必要的依赖

npm install next-remove-imports @uiw/react-markdown-editor

2. 修改 next.config.js

const removeImports = require('next-remove-imports')();

module.exports = removeImports({
  // Next.js 配置
});

3. 在 Next.js 页面中使用

import dynamic from 'next/dynamic';
import 'uiw/react-markdown-editor/markdown-editor.css';

const MarkdownEditor = dynamic(() => import('@uiw/react-markdown-editor'), {
  ssr: false
});

const HomePage = () => (
  <div>
    <MarkdownEditor value="Hello Markdown!" />
  </div>
);

export default HomePage;

以上教程介绍了 React Markdown 编辑器的项目介绍、快速启动、应用案例和与 Next.js 的集成。希望对您有所帮助。