EditorJS in NextJS无法加载插件

Question

我想让EditorJS在NextJS工作。编辑器在没有插件的情况下加载很好，只有一个段落作为块选项。但是，当我试图通过工具支持控制台添加插件时，会引发以下警告：

editor.js?9336:2 Module Tools was skipped because of TypeError: Cannot read property 'prepare' of undefined

当我单击浏览器中的编辑器时，它会抛出：

Uncaught TypeError: Cannot read property 'holder' of undefined

我在普通的React应用程序中测试了编辑器插件，它们加载得很好。这意味着问题是在EditorJS和NextJS导入和处理插件。我曾尝试使用require导入componentDidMount钩子中的编辑器和插件，但问题与NextJS动态导入相同。试图使用React获得组件，但发现目前NextJS在获取组件参考资料方面有问题，尝试了建议的解决办法，但仍然没有结果。在触发onChange之前，编辑器的实例是不可用的，因此插件无法与编辑器挂钩，因为它具有“准备”属性，或者在编辑器上发生事件之前整个编辑器都是未定义的，但是编辑器输出到控制台，它已经准备好了。

我组件的代码：

import React from "react";
import dynamic from "next/dynamic";

const EditorNoSSR = dynamic(() => import("react-editor-js"), { ssr: false });
const Embed = dynamic(() => import("@editorjs/embed"), { ssr: false });
class Editor extends React.Component {
  state = {
    editorContent: {
      blocks: [
        {
          data: {
            text: "Test text",
          },
          type: "paragraph",
        },
      ],
    },
  };

  constructor(props) {
    super(props);
    this.editorRef = React.createRef();
  }

  componentDidMount() {
    console.log(this.editorRef.current);
    console.log(this.editorInstance);
  }

  onEdit(api, newData) {
    console.log(this.editorRef.current);
    console.log(this.editorInstance);

    this.setState({ editorContent: newData });
 }

  render() {
    return (
      <EditorNoSSR
        data={this.state.editorContent}
        onChange={(api, newData) => this.onEdit(api, newData)}
        tools={{ embed: Embed }}
        ref={(el) => {
          this.editorRef = el;
        }}
        instanceRef={(instance) => (this.editorInstance = instance)}
      />
    );
  }
}

export default Editor;

这个问题有什么解决办法吗？我知道SSR对于访问DOM的组件的客户端呈现是一种挑战，但是有一些条件可以检查窗口对象是否未定义，但是在我的情况下，它看起来并不像一个问题。

更新：

我已经找到了一个解决方案，但它并不是NextJS解决问题的方法，但是，它是有效的。它不需要一个react，并且像普通的EditorJS一样实现为创建EditorJS实例。

class Editor extends React.Component {
 constructor(props) {
   super(props);
   this.editor = null;
 }

 async componentDidMount() {
   this.initEditor();
 }

 initEditor = () => {
   const EditorJS = require("@editorjs/editorjs");
   const Header = require("@editorjs/header");
   const Embed = require("@editorjs/embed");
   const Delimiter = require("@editorjs/delimiter");
   const List = require("@editorjs/list");
   const InlineCode = require("@editorjs/inline-code");
   const Table = require("@editorjs/table");
   const Quote = require("@editorjs/quote");
   const Code = require("@editorjs/code");
   const Marker = require("@editorjs/marker");
   const Checklist = require("@editorjs/checklist");

   let content = null;
   if (this.props.data !== undefined) {
     content = this.props.data;
   }

   this.editor = new EditorJS({
     holder: "editorjs",
     logLevel: "ERROR",
     tools: {
       header: Header,
       embed: {
         class: Embed,
         config: {
           services: {
             youtube: true,
             coub: true,
           },
         },
       },
       list: List,
       inlineCode: InlineCode,
       code: Code,
       table: Table,
       quote: Quote,
       marker: Marker,
       checkList: Checklist,
       delimiter: Delimiter,
     },

     data: content,
   });
 };
 async onSave(e) {
   let data = await this.editor.saver.save();

   this.props.save(data);
 }

 render() {
   return (
     <>
       <button onClick={(e) => this.onSave(e)}>Save</button>
       <div id={"editorjs"} onChange={(e) => this.onChange(e)}></div>
     </>
   );
 }
}

此实现在NextJS中工作。

如果我找到更好的解决方案，我将更新代码。

更新2:

崛起的奥德瓜所提出的答案正在起作用。

Answer 1

您必须创建一个独立的组件，然后在那里导入所有工具：

import EditorJs from "react-editor-js";
import Embed from "@editorjs/embed";
import Table from "@editorjs/table";
import List from "@editorjs/list";
import Warning from "@editorjs/warning";
import Code from "@editorjs/code";
import LinkTool from "@editorjs/link";
import Image from "@editorjs/image";
import Raw from "@editorjs/raw";
import Header from "@editorjs/header";
import Quote from "@editorjs/quote";
import Marker from "@editorjs/marker";
import CheckList from "@editorjs/checklist";
import Delimiter from "@editorjs/delimiter";
import InlineCode from "@editorjs/inline-code";
import SimpleImage from "@editorjs/simple-image";

const CustomEditor = () => {

    const EDITOR_JS_TOOLS = {
        embed: Embed,
        table: Table,
        marker: Marker,
        list: List,
        warning: Warning,
        code: Code,
        linkTool: LinkTool,
        image: Image,
        raw: Raw,
        header: Header,
        quote: Quote,
        checklist: CheckList,
        delimiter: Delimiter,
        inlineCode: InlineCode,
        simpleImage: SimpleImage
    };

    return (

        <EditorJs tools={EDITOR_JS_TOOLS} />

    );
}

export default CustomEditor;

然后在您的NextJS页面中，使用如下动态导入：

let CustomEditor;
if (typeof window !== "undefined") {
  CustomEditor = dynamic(() => import('../src/components/CustomEditor'));
}

你可以使用你的组件：

return (
  {CustomEditor && <CustomEditor />}
)

来源：https://github.com/Jungwoo-An/react-editor-js/issues/31