admin/src/components/Wangeditor/index.jsx

import React, { useState, useEffect } from "react";
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-react";

function MyEditor(props) {
  const {
    value,
    onChange = (e) => {
      setHtml(e);
    },
    toolbarConfig = {
      excludeKeys: [
        "insertImage",
        "viewImageLink",
        "editImage",
        "uploadImage",
        "uploadVideo",
      ],
    },
    editorConfig = {
      placeholder: "请输入内容...",
    },
    readonly = false,
  } = props;
  const [editor, setEditor] = useState(null); // 存储 editor 实例
  const [html, setHtml] = useState("");
  console.log(props, "MyEditor");
  // 模拟 ajax 请求，异步设置 html
  useEffect(() => {
    console.log(editor     );

    setHtml(value);
  }, [value]);

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

  function insertText() {
    if (editor == null) return;
    editor.insertText(" hello ");
  }

  function printHtml() {
    if (editor == null) return;
    console.log(editor.getHtml());
  }

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

export default MyEditor;