Question

我在项目中使用react-draft-wysiwyg，但遇到了“大”问题。

经过数小时的尝试，我无法渲染数据库的内容。

首先，我尝试并成功在MongoDB中使用以下代码保存“概述”（contentState）：

<Editor initialContentState={person.overview} toolbarClassName="rdw-storybook-toolbar" wrapperClassName="rdw-storybook-wrapper" editorClassName="editor" onContentStateChange={this.onContentStateChange} toolbar={{ options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'link', 'embedded', 'emoji', 'remove', 'history'], }}

我的组件构造函数：

this.state = {person：{isEdit：false，}};

如您所见，我没有在构造函数人中设置：{Overview：{}}，因为如果这样做，则会出现以下错误：

无效的RawDraftContentState▶24个堆栈帧被折叠。 ./src/index.js src / index.js：19 16 | ）; 17 | 18 | 19 | ReactDOM.render（ 20 | 21 | 22 | ，

所以我只是不设置概述：{}在构造函数中，并且保存过程正常进行。

之后，我试图在组件中呈现保存的内容，以便能够进行更改和更新。如果我可以使用相同的组件进行编辑和保存以使其可重用，那就太好了，但这不是必须的。

问题是，尽管我设置了this.setState（{person：overview：contentFromDatabase}）（选中，正在设置），但该组件显示空白，什么也没有。您可以从零开始书写，但不会加载内容。

我不得不说，几个小时之后，我对editorState和contentState有点困惑，但是我认为我数据库的内容是RawDraftContent，对吗？

这是我的数据库文件：

"_id" : ObjectId("5b3d2897589a5e2fa4ba60ea"), "overview" : { "blocks" : [ { "key" : "ekrl0", "text" : "this is the CONTENT", "type" : "unstyled", "depth" : 0, "inlineStyleRanges" : [ { "offset" : 14, "length" : 2, "style" : "BOLD" } ], "entityRanges" : [ ] } ] }, "createdAt" : ISODate("2018-07-04T20:05:43.129Z"), "__v" : 0 }

任何帮助都会感激不尽。

Answer 1

您可以执行以下操作，而不是将数据库中的内容另存为编辑器状态：

import {
  Editor,
  EditorState,
  ContentState,
  convertFromHTML,
  CompositeDecorator,
  convertToRaw,
  getDefaultKeyBinding,
} from 'draft-js';

const blocks = convertToRaw(editorState.getCurrentContent()).blocks;
    const value = blocks.map(block => (!block.text.trim() && '\n') || block.text).join('\n');

要获取数据，您可以执行以下操作：

componentWillMount() { 
      const { value } = this.props
      const blocksFromHTML = convertFromHTML(value));
      const state = ContentState.createFromBlockArray(
        blocksFromHTML.contentBlocks,
        blocksFromHTML.entityMap,
      );
      this.state = {
        editorState: EditorState.createWithContent(
          state,
          compositeDecorator,
        ),
      };
}

Answer 2

最后使用editorContent + convertToRaw + convertFrom raw。

react-draft-wysiwyg-渲染保存的内容以进行更新

2 个答案: