reactjs 当我使用convertFromHTML方法使用HTML内容启动编辑器时,未定义文档

wfypjpf4  于 2024-01-07  发布在  React
关注(0)|答案(2)|浏览(103)

我想用html标记初始化我的编辑器状态,但我得到这个错误

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

字符串
这是我从stackoverflow question复制的代码。当我用内容初始化editorState时,它出错了。

  1. const blocksFromHTML = convertFromHTML(
  2. "<p>Hey this <strong>editor</strong> rocks 😀</p>"
  3. );
  4. const content = ContentState.createFromBlockArray(
  5. blocksFromHTML.contentBlocks,
  6. blocksFromHTML.entityMap
  7. );
  8. const [editorState, setEditorState] = useState(
  9. EditorState.createWithContent(content)
  10. );

  1. import React, { useState } from "react";
  2. import {
  3. Editor,
  4. EditorState,
  5. RichUtils,
  6. getDefaultKeyBinding,
  7. ContentState,
  8. convertFromHTML
  9. } from "draft-js";
  10. import "./RichTextEditor.css";
  11. import "draft-js/dist/Draft.css";
  12. const MinimumRequirements = () => {
  13. const blocksFromHTML = convertFromHTML(
  14. "<p>Hey this <strong>editor</strong> rocks 😀</p>"
  15. );
  16. const content = ContentState.createFromBlockArray(
  17. blocksFromHTML.contentBlocks,
  18. blocksFromHTML.entityMap
  19. );
  20. const [editorState, setEditorState] = useState(
  21. EditorState.createWithContent(content)
  22. );
  23. const onChangeHandler = (editorState) => setEditorState(editorState);
  24. return (
  25. <div className="RichEditor-root">
  26. <Editor
  27. blockStyleFn={getBlockStyle}
  28. customStyleMap={styleMap}
  29. handleKeyCommand={handleKeyCommand}
  30. keyBindingFn={mapKeyToEditorCommand}
  31. onChange={onChangeHandler}
  32. placeholder="Create pc requirements..."
  33. />
  34. </div>
  35. );
  36. };
  37. export default MinimumRequirements;


我仍然得到这个错误.有人可以帮助我吗?
编辑:我的代码现在工作,但我不知道为什么,我没有对这个代码的变化?我担心我会得到生产错误。

30byixjq

30byixjq1#

参见https://github.com/facebook/draft-js/issues/1361
convertFromHTML不会在服务器端实现。我复制了该URL中提供的信息,以解决服务器端呈现的问题
作者还提供了一个解决方案,其中包括安装NPM包 jsdom

wpx232ag

wpx232ag2#

这个答案对我不起作用,这个对我起作用:

  1. import draftToHtml from "draftjs-to-html";
  2. import { convertFromHTML } from "draft-convert";
  3. useEffect(() => {
  4. if (appSettings?.lsMessage == "") {
  5. setEditorState(EditorState.createEmpty());
  6. } else {
  7. setEditorState(
  8. EditorState.createWithContent(convertFromHTML(appSettings?.lsMessage))
  9. );
  10. }
  11. }, []);

字符串
appSettings?.lsMessage就是我保存text / html的地方。我保存它如下:

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

展开查看全部

相关问题