response-draft-wysiwyg - отображать сохраненный контент для обновления - PullRequest
Новая
       6

response-draft-wysiwyg - отображать сохраненный контент для обновления

0 голосов
/ 04 июля 2018

Я использую act-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'], }}

Конструктор My Component:

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 }

Любая помощь будет принята с благодарностью.

Ответы [ 2 ]

0 голосов
/ 05 июля 2018

Наконец сделано с помощью editorContent + convertToRaw + convertFrom raw.

0 голосов
/ 04 июля 2018

Вместо сохранения содержимого в БД в качестве редактора вы можете сделать что-то вроде этого: 

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,
        ),
      };
}
...