富文本编辑器（wangEditor 5）

一、链接 

wangEditor

二、基础

import '@wangeditor/editor/dist/css/style.css'; // 引入 css

import React, { useState, useEffect } from 'react';
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';

function MyEditor() {
  // editor 实例
  //   const [editor, setEditor] = (useState < IDomEditor) | (null > null); // TS 语法
  const [editor, setEditor] = useState(null); // JS 语法

  // 编辑器内容
  const [html, setHtml] = useState(null);

  // 模拟 ajax 请求，异步设置 html
  //   useEffect(() => {
  //     setTimeout(() => {
  //       setHtml('<p>hello world</p>');
  //     }, 1500);
  //   }, []);

  // 工具栏配置
  //   const toolbarConfig: Partial<IToolbarConfig> = {}; // TS 语法
  const toolbarConfig = {}; // JS 语法

  // 编辑器配置
  //   const editorConfig: Partial<IEditorConfig> = {
  // TS 语法
  const editorConfig = {
    // JS 语法
    placeholder: '请输入内容...',
    MENU_CONF: {},
  };
  // base64 插入图片
  editorConfig.MENU_CONF['uploadImage'] = {
    // 其他配置...

    // 小于该值就插入 base64 格式（而不上传），默认为 0
    base64LimitSize: 5 * 1024 * 1024, // 5M
  };

  // 及时销毁 editor ，重要！
  useEffect(() => {
    return () => {
      if (editor == null) return;
      editor.destroy();
      setEditor(null);
    };
  }, [editor]);

  return (
    <>
      <div style={{ border: '1px solid #ccc', zIndex: 100, width: '500px' }}>
        <Toolbar
          editor={editor}
          defaultConfig={toolbarConfig}
          mode="default"
          style={{ borderBottom: '1px solid #ccc', width: '500px' }}
        />
        <Editor
          defaultConfig={editorConfig}
          value={html}
          onCreated={setEditor}
          onChange={editor => setHtml(editor.getHtml())}
          mode="default"
          style={{ height: '500px', overflowY: 'hidden', width: '500px' }}
        />
      </div>
      <div style={{ marginTop: '15px' }}>{html}</div>
    </>
  );
}

export default MyEditor;

根据提供的代码，可以看出你正在使用 @wangeditor/editor-for-react 库来实现富文本编辑器。这个库为 React 提供了一些组件，可以很方便地集成 WangEditor 富文本编辑器。

在代码中，首先引入了 @wangeditor/editor/dist/css/style.css 文件，用于引入样式。

然后定义了一个名为 MyEditor 的函数组件。在该组件中，使用了 React 的 useState 和 useEffect 钩子来管理编辑器实例和编辑器内容。

在 MyEditor 组件中，使用了 Toolbar 和 Editor 组件来渲染富文本编辑器的工具栏和编辑区域。通过 editor 和 setEditor 状态来保存和更新编辑器实例。通过 html 和 setHtml 状态来保存和更新编辑器的内容。

在 useEffect 钩子中，使用了模拟的异步请求来设置编辑器的初始内容。你可以根据实际需求修改这部分逻辑。

同时，还定义了 toolbarConfig 和 editorConfig 来配置工具栏和编辑器的属性。

最后，通过返回 JSX 元素来渲染编辑器和展示编辑器内容的部分。

需要注意的是，在组件销毁时，通过 useEffect 钩子的清理函数，及时销毁编辑器实例，避免内存泄漏。

如果需要显示编辑器的内容，可以取消注释 <div style={{ marginTop: '15px' }}>{html}</div> 这一行代码。

请确保已正确安装所需的依赖，并根据实际需要进行调整和修改。

三、类组件写法

当将函数组件转换为类组件时，需要使用 class 关键字定义一个继承自 React.Component 的类，并实现 render 方法来返回组件的 JSX 结构。同时，需要使用 this.state 和 this.setState 来管理组件的状态。

以下是将上面的函数组件改写为类组件的示例：

import React from 'react';
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editor: null,
      html: null,
    };
  }

  componentDidMount() {
    // 模拟 ajax 请求，异步设置 html
    setTimeout(() => {
      this.setState({ html: '<p>hello world</p>' });
    }, 1500);
  }

  componentWillUnmount() {
    const { editor } = this.state;
    if (editor) {
      editor.destroy();
      this.setState({ editor: null });
    }
  }

  render() {
    const { editor, html } = this.state;
    const toolbarConfig = {};
    const editorConfig = {
      placeholder: '请输入内容...',
    };

    return (
      <>
        <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
          <Toolbar
            editor={editor}
            defaultConfig={toolbarConfig}
            mode="default"
            style={{ borderBottom: '1px solid #ccc' }}
          />
          <Editor
            defaultConfig={editorConfig}
            value={html}
            onCreated={(editor) => this.setState({ editor })}
            onChange={(editor) => this.setState({ html: editor.getHtml() })}
            mode="default"
            style={{ height: '500px', overflowY: 'hidden' }}
          />
        </div>
        {/* <div style={{ marginTop: '15px' }}>{html}</div> */}
      </>
    );
  }
}

export default MyEditor;

在类组件中，我们使用了 constructor 方法来初始化状态，并且在 componentDidMount 生命周期方法中模拟了异步请求来设置编辑器的初始内容。同时，在 componentWillUnmount 生命周期方法中及时销毁编辑器实例。

其余部分与函数组件的逻辑基本保持一致，只是需要使用 this.state 和 this.setState 来管理状态。