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

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

1 голос
/ 05 мая 2020

В свой проект я интегрировал редактор из 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 не загружается. Я пытался понять обходные пути, но не смог, так как никогда раньше не использовал Draft JS. Кто-нибудь может мне с этим помочь?

1 Ответ

2 голосов
/ 07 мая 2020

Вы должны использовать 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>
        );
    }
}

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

...