react-draft-wysiwyg - 呈现保存的内容以更新

Question

我在一个项目中使用 react-draft-wysiwyg，但遇到 'big' 问题。

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

首先，我尝试使用以下代码在 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 = { 人：{ isEdit: false, } };

如您所见，我没有在构造函数中设置 person: { overview: {} }，因为如果我这样做，我会得到以下错误：

invalid RawDraftContentState ▶ 24 stack frames were collapsed. ./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,
        ),
      };
}

react-draft-wysiwyg - 呈现保存的内容以更新

react-draft-wysiwyg - render saved content to update

javascript

mongodb

reactjs

draftjs