使 Editor.js 在 Remix 中工作

Question

我正在尝试将 Editor.js 集成到 Remix 应用程序中。

我尝试了不同的选项（使用 ou 而不使用

react-editor-js

），但我总是会遇到编译错误：

ReferenceError: window is not defined
    at /home/.../project/node_modules/@editorjs/link/dist/link.umd.js:2:6471

或

ReferenceError: Element is not defined
    at /home/.../project/node_modules/@editorjs/checklist/dist/checklist.umd.js:2:1525

我也尝试过设置没有插件的编辑器，至少有一个工作基础，但我也以浏览器中的控制台错误结束：

Warning: Prop `id` did not match. Server: "react-editor-js-18c6d074c06" Client: "react-editor-js-18c6d074d5a"

Editor.js is not ready because of Error: element with ID «react-editor-js-18c6d074d5a» is missing. Pass correct holder's ID.

Uncaught (in promise) Error: element with ID «react-editor-js-18c6d074d5a» is missing. Pass correct holder's ID.

通过使用以下组件：

import { createReactEditorJS } from "react-editor-js"

const ReactEditorJS = createReactEditorJS()

export default function EditorInput() {
    return (
        <ReactEditorJS
            defaultValue={{
                time: 1635603431943,
                blocks: [
                    {
                        id: "sheNwCUP5A",
                        type: "header",
                        data: {
                            text: "Editor.js",
                            level: 2,
                        },
                    },
                    {
                        id: "12iM3lqzcm",
                        type: "paragraph",
                        data: {
                            text: "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text.",
                        },
                    },
                ],
            }}
            tools={{}}
        />
    )
}

如果有人作为一个工作例子，那就太好了。预先感谢。

Answer 1

您是否尝试过将编辑器包装在

ClientOnly

（来自 remix-utils）中？