javascript - 使用草稿js的Nextjs-当我使用convertFromHTML方法使用HTML内容初始化编辑器时未定义文档

标签 javascript reactjs next.js draftjs

我想使用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 question复制的代码。使用内容初始化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;

我仍然收到此错误。有人可以帮助我吗?
编辑:我的代码现在可以正常工作,但是我不知道为什么,我对此代码没有更改?恐怕我会在生产中出错。

最佳答案

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

convertFromHTML is not expected to be implemented for the server. I copied the information provided in that url to solve this for server side rendering


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

关于javascript - 使用草稿js的Nextjs-当我使用convertFromHTML方法使用HTML内容初始化编辑器时未定义文档,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63405683/

相关文章:

javascript - 每次点击都会 react 进度条

php - 将Mysql查询结果传递给javascript,然后使用原始变量调用函数。

javascript - 让 NextJS 图像组件和 @svgr/webpack 一起玩得很好

javascript - 如何获取当前光标在draft.js中的位置?

testing - 如何使用 Jest 在 Next 中测试 _document

javascript - 有没有办法记录 npm install 命令的输出

javascript - meteor 发布/订阅困惑

reactjs - react 分析器中火焰图的条形宽度

javascript - JSON.Stringify |将结果输出到屏幕上,并带有引号标签 ''

javascript - 重新加载时 .map 不是函数 reactjs