🎉🎉🎉一文全面了解：react-antd-admin 如何实现 Markdown 编辑器

要在React应用中使用@toast-ui/editor创建一个Markdown编辑器，您可以按照以下步骤进行操作：

首先，确保您已经创建了一个React应用。如果没有，请使用create-react-app或您喜欢的其他方式创建一个新的React项目。
安装@toast-ui/editor和其他相关的依赖。在项目目录下运行以下命令：

bash 复制代码

npm install @toast-ui/editor

在React组件中导入和使用@toast-ui/editor。

javascript 复制代码

import React, { useEffect, useRef } from 'react';
import Editor from '@toast-ui/editor';

import 'tui-editor/dist/tui-editor.css';
import 'tui-editor/dist/tui-editor-contents.css';
import 'tui-editor/dist/tui-editor-extScrollSync.css';

const MarkdownEditor = () => {
  const editorRef = useRef(null);

  useEffect(() => {
    // 创建Editor实例
    const editor = new Editor({
      el: editorRef.current,
      initialEditType: 'markdown', // 设置编辑器初始模式为Markdown
      previewStyle: 'vertical', // 设置预览样式为垂直
      height: '500px', // 设置编辑器高度
    });

    // 将Editor实例挂载到组件的状态或上下文中，以便在需要时访问
    // this.editor = editor; // 如果需要在组件中访问editor实例，请将其保存在状态中

    return () => {
      // 在组件卸载时销毁Editor实例
      editor.remove();
    };
  }, []);

  return (
    <div>
      <h1>Markdown Editor</h1>
      <div ref={editorRef}></div>
    </div>
  );
};

export default MarkdownEditor;

在React组件中使用useRef来获取<div>元素，这个元素将用于渲染Markdown编辑器。
在useEffect钩子中，创建@toast-ui/editor实例，配置编辑器的选项，然后将其附加到之前获取的<div>元素上。您可以根据需要自定义编辑器的选项。
如果需要在组件中访问编辑器实例，可以将其保存在组件的状态或上下文中以供以后使用。
在组件卸载时，通过return语句中的清理函数销毁编辑器实例，以防止内存泄漏。
最后，在组件的JSX中，渲染包含Markdown编辑器的<div>元素。

这样，您就可以在React应用中使用@toast-ui/editor创建一个Markdown编辑器。根据您的需求，您可以添加更多的自定义选项和功能。

react-antd-admin 是以下这样实现的

js 复制代码

import React, { useEffect, useRef, forwardRef } from "react";
import Editor from '@toast-ui/editor';
import '@toast-ui/editor/dist/toastui-editor.css';
import '@toast-ui/editor/dist/theme/toastui-editor-dark.css';

const MarkdownEditors = forwardRef(function MarkdownEditor({ content = '', editorRef }: any) {
    useEffect(() => {
        const editor = new Editor({
            el: editorRef.current,
            previewStyle: 'vertical',
            height: '500px',
            initialValue: content,
            theme: 'dark'
        });

        // 可供外部访问
        editorRef.$$_editor = editor

        return () => {
            editor.destroy()
        }
    }, [])

    return (
        <div id="editor" ref={editorRef}></div>
    )
})

export default MarkdownEditors

这段代码是一个React组件，它创建了一个Markdown编辑器，使用了@toast-ui/editor库来实现。让我为您解释一下代码的主要部分：

import语句：首先，通过import语句导入了所需的依赖项，包括React、useEffect、useRef和forwardRef。还导入了@toast-ui/editor库以及编辑器的CSS样式。
forwardRef函数：forwardRef是React中的一个高阶函数，允许你将ref传递给组件的子组件。在这个组件中，forwardRef函数用于接受一个名为editorRef的ref，并将其传递给编辑器组件。这样，您可以在组件外部访问编辑器的实例。
MarkdownEditors组件：这是一个函数组件，它接受两个prop，content和editorRef。content用于指定编辑器的初始内容，默认为空字符串，而editorRef用于引用编辑器的DOM元素。
useEffect钩子：在组件内部，使用了useEffect来处理编辑器的创建和销毁逻辑。在useEffect的回调函数中，创建了一个@toast-ui/editor实例，并将其附加到具有特定id的DOM元素上。配置选项包括previewStyle设置为'vertical'，编辑器的高度设置为'500px'，初始内容设置为content，以及主题设置为'dark'。
editorRef.$$_editor：在组件内部，将editor实例赋值给editorRef.$$_editor，以便将编辑器实例暴露给组件外部。这允许您在组件外部访问和操作编辑器实例。
return语句：在组件的返回值中，渲染了一个<div>元素，并将editorRef赋给其ref属性，以便将编辑器附加到这个DOM元素上。

总之，这个组件允许您在React应用中轻松创建一个带有Markdown编辑器的组件，并且通过editorRef，您可以在组件外部访问编辑器的实例，以便进行自定义操作和交互。

我们是这样使用的

js 复制代码

import MarkdownEditors from '@/components/markdownEditor'
const mmms = useRef(null)
<div style={{marginTop: '20px'}}>
  <MarkdownEditors editorRef={mmms} />
</div>