带有草稿js的Nextjs - 当我使用convertFromHTML方法启动带有HTML内容的编辑器时，未定义文档

Question

我想用 html 标记初始化我的编辑器状态，但我收到此错误

at renderToString (/home/al/Documents/node/admin-next/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)
at render (/home/al/Documents/node/admin-next/node_modules/next-server/dist/server/render.js:86:16)
at renderPage (/home/al/Documents/node/admin-next/node_modules/next-server/dist/server/render.js:211:20)
at Function.value (/home/al/Documents/node/admin-next/.next/server/static/development/pages/_document.js:925:41)
at _callee$ (/home/al/Documents/node/admin-next/.next/server/static/development/pages/_document.js:2334:78)
at tryCatch (/home/al/Documents/node/admin-next/node_modules/regenerator-runtime/runtime.js:62:40)
at Generator.invoke [as _invoke] (/home/al/Documents/node/admin-next/node_modules/regenerator-runtime/runtime.js:296:22)
at Generator.prototype.(anonymous function) [as next] (/home/al/Documents/node/admin-next/node_modules/regenerator-runtime/runtime.js:114:21)
at asyncGeneratorStep (/home/al/Documents/node/admin-next/.next/server/static/development/pages/_document.js:352:24)

这是我从这个stackoverflow问题复制的代码。当我用内容初始化 editorState 时出错。

const blocksFromHTML = convertFromHTML(
    "<p>Hey this <strong>editor</strong> rocks 😀</p>"
  );

  const content = ContentState.createFromBlockArray(
    blocksFromHTML.contentBlocks,
    blocksFromHTML.entityMap
  );

  const [editorState, setEditorState] = useState(
    EditorState.createWithContent(content)
  );

import React, { useState } from "react";
import {
  Editor,
  EditorState,
  RichUtils,
  getDefaultKeyBinding,
  ContentState,
  convertFromHTML
} from "draft-js";
import "./RichTextEditor.css";
import "draft-js/dist/Draft.css";

const MinimumRequirements = () => {
  const blocksFromHTML = convertFromHTML(
    "<p>Hey this <strong>editor</strong> rocks 😀</p>"
  );

  const content = ContentState.createFromBlockArray(
    blocksFromHTML.contentBlocks,
    blocksFromHTML.entityMap
  );

  const [editorState, setEditorState] = useState(
    EditorState.createWithContent(content)
  );

  const onChangeHandler = (editorState) => setEditorState(editorState);

  return (
    <div className="RichEditor-root">
      <Editor
        blockStyleFn={getBlockStyle}
        customStyleMap={styleMap}
        handleKeyCommand={handleKeyCommand}
        keyBindingFn={mapKeyToEditorCommand}
        onChange={onChangeHandler}
        placeholder="Create pc requirements..."
      />
    </div>
  );
};

export default MinimumRequirements;

我仍然收到此错误。有人可以帮助我吗？

编辑：我的代码现在可以工作，但我不知道为什么，并且我没有对此代码进行更改？我担心我会在生产时出错。

Answer 1

参见https://github.com/facebook/draft-js/issues/1361：

convertFromHTML 预计不会在服务器上实现。我复制了该网址中提供的信息来解决服务器端渲染的问题

作者还提供了一个涉及安装 NPM 包的解决方案jsdom。

Answer 2

嘿，接受的答案对我不起作用。这对我有用：

  const [editorState, setEditorState] = useState(EditorState.createEmpty());
  useEffect(() => {
    if (appSettings?.lsMessage == "") {
      setEditorState(EditorState.createEmpty());
    } else {
      setEditorState(
        EditorState.createWithContent(convertFromHTML(appSettings?.lsMessage))
      );
    }
  });

appSettings?.lsMessage 就是我保存文本/html 的地方。 我这样保存：

  const onEditorStateChange = (editorState: any) => {
    setEditorState(editorState);
    setLsMessage(draftToHtml(convertToRaw(editorState.getCurrentContent())));
  };