一、链接 

wangEditor

二、基础

import '@wangeditor/editor/dist/css/style.css'; // 引入 cssimport 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 格式（而不上传），默认为 0base64LimitSize: 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' }}><Toolbareditor={editor}defaultConfig={toolbarConfig}mode="default"style={{ borderBottom: '1px solid #ccc', width: '500px' }}/><EditordefaultConfig={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 请求，异步设置 htmlsetTimeout(() => {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 }}><Toolbareditor={editor}defaultConfig={toolbarConfig}mode="default"style={{ borderBottom: '1px solid #ccc' }}/><EditordefaultConfig={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 来管理状态。