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

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

  1. 首先,确保您已经创建了一个React应用。如果没有,请使用create-react-app或您喜欢的其他方式创建一个新的React项目。

  2. 安装@toast-ui/editor和其他相关的依赖。在项目目录下运行以下命令:

bash 复制代码
npm install @toast-ui/editor
  1. 在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;
  1. 在React组件中使用useRef来获取<div>元素,这个元素将用于渲染Markdown编辑器。

  2. useEffect钩子中,创建@toast-ui/editor实例,配置编辑器的选项,然后将其附加到之前获取的<div>元素上。您可以根据需要自定义编辑器的选项。

  3. 如果需要在组件中访问编辑器实例,可以将其保存在组件的状态或上下文中以供以后使用。

  4. 在组件卸载时,通过return语句中的清理函数销毁编辑器实例,以防止内存泄漏。

  5. 最后,在组件的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库来实现。让我为您解释一下代码的主要部分:

  1. import语句:首先,通过import语句导入了所需的依赖项,包括React、useEffectuseRefforwardRef。还导入了@toast-ui/editor库以及编辑器的CSS样式。

  2. forwardRef函数:forwardRef是React中的一个高阶函数,允许你将ref传递给组件的子组件。在这个组件中,forwardRef函数用于接受一个名为editorRef的ref,并将其传递给编辑器组件。这样,您可以在组件外部访问编辑器的实例。

  3. MarkdownEditors组件:这是一个函数组件,它接受两个prop,contenteditorRefcontent用于指定编辑器的初始内容,默认为空字符串,而editorRef用于引用编辑器的DOM元素。

  4. useEffect钩子:在组件内部,使用了useEffect来处理编辑器的创建和销毁逻辑。在useEffect的回调函数中,创建了一个@toast-ui/editor实例,并将其附加到具有特定id的DOM元素上。配置选项包括previewStyle设置为'vertical',编辑器的高度设置为'500px',初始内容设置为content,以及主题设置为'dark'。

  5. editorRef.$$_editor:在组件内部,将editor实例赋值给editorRef.$$_editor,以便将编辑器实例暴露给组件外部。这允许您在组件外部访问和操作编辑器实例。

  6. 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>
相关推荐
yinke小琪11 分钟前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
枣把儿15 分钟前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
望获linux16 分钟前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
爱编程的喵18 分钟前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
喜欢吃豆20 分钟前
深入企业内部的MCP知识(三):FastMCP工具转换(Tool Transformation)全解析:从适配到增强的工具进化指南
java·前端·人工智能·大模型·github·mcp
豆苗学前端23 分钟前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试
不见_23 分钟前
不想再写周报了?来看看这个吧!
前端·命令行
yinke小琪25 分钟前
JavaScript 事件冒泡与事件捕获
前端·javascript
pany27 分钟前
写代码的节奏,正在被 AI 改写
前端·人工智能·aigc
liliangrong77730 分钟前
ES2025新特性详解
前端