Проблема с загрузкой текста в редакторе response-draft-wysiwyg

Question

В свой проект я интегрировал редактор от react-draft-wysiwyg. Теперь мне нужно протестировать текстовый редактор, загрузив в него текстовые данные. Я пытался следовать документации, и мой код в настоящее время выглядит так:

import React, { Component } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import './textEditor.css';
import { convertFromRaw } from 'draft-js';


const content = {
    "entityMap":{

    },
    "blocks":[
       {
          "key":"637gr",
          "text":"Initialized from content state.",
          "type":"unstyled",
          "depth":0,
          "inlineStyleRanges":[

          ],
          "entityRanges":[

          ],
          "data":{

          }
       }
    ]
 };
export default class RichTextEditor extends Component {

    constructor(props) {
        super(props);
        const contentState = convertFromRaw(content);
        this.state = {
          contentState,
        }
      }

      onContentStateChange: Function =  (contentState) => {
        this.setState({
          contentState,
        });
      }; 
    render() {
        const { contentState } = this.state;
        return (
            <div>
                <Editor
                    editorClassName={"report-editor"}
                    editorState={this.props.editorState}
                    onEditorStateChange={this.props.onEditorStateChange}
                    onContentStateChange={this.props.onContentStateChange}
                />
            </div>
        )
    }
}

Я пытался следовать документации, но json не загружается. Я попытался понять обходные пути, но не смог, поскольку никогда раньше не использовал DraftJS. Кто-нибудь может мне с этим помочь?

Answer 1

Вы должны использовать EditorState.createWithContent чтобы создать состояние редактора на основе данных вашего контента и передать его в Editor компонент, например:

import React, { Component } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import './textEditor.css';
import { convertFromRaw, EditorState } from 'draft-js';

const content = { ... };

export default class RichTextEditor extends Component {

    constructor(props) {
        super(props);
        const contentState = convertFromRaw(content);
        const editorState = EditorState.createWithContent(contentState);

        this.state = {
          contentState,
          editorState,
        };
    }

    render() {
        const { editorState } = this.state;
        return (
            <div>
                <Editor
                    editorClassName={"report-editor"}
                    editorState={editorState}
                    onEditorStateChange={this.props.onEditorStateChange}
                    onContentStateChange={this.props.onContentStateChange}
                />
            </div>
        );
    }
}

Вы можете посмотреть живой пример здесь