Nextjs使用wangeditor

$ npm install wangeditor-for-react

import { useState } from "react";
import ReactWEditor from "wangeditor-for-react";

function Editor() {
  const [value, setValue] = useState("");

  return <ReactWEditor defaultValue={value} onChange={setValue} />;
}

export default Editor;

import { useState } from "react";
import dynamic from "next/dynamic";

const ReactWEditor = dynamic(import("wangeditor-for-react"), {
  ssr: false,
  loading: () => <p>Loading ...</p>,
});

const config = {
  height: 500,
  menus: ["bold", "link", "image"],
  showFullScreen: true,
  customUploadImg: function (resultFiles, insertImgFn) {
    // 获取上传的文件
    const file = resultFiles[0];
    // 上传图片，返回结果，将图片插入到编辑器中
    insertImgFn('imgUrl');
  },
};

function Editor() {
  const [value, setValue] = useState("");

  return (
    <ReactWEditor
      config={config}
      defaultValue={value}
      onChange={setValue}
    ></ReactWEditor>
  );
};

export default Editor;