Как обновить состояние редактора из данных JSON ContentState в реагировать-черновик-wysiwyg? - PullRequest
Новая
       17

Как обновить состояние редактора из данных JSON ContentState в реагировать-черновик-wysiwyg?

0 голосов
/ 20 мая 2018

Это мой editor.js

У меня есть образцы данных JSON в постоянном контенте.Что я хочу сделать, так это то, что изначально, когда я открываю свой редактор, он должен отображать исходный контент в переменном контенте.Но я понятия не имею, как обновить editorState, поскольку он неизменный. 

import React, { Component } from 'react';
import { EditorState, convertToRaw, convertFromRaw, ContentState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';


const content = {"blocks":[{"key":"5ngeh","text":"hi there !!!!!","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}],"entityMap":{}};

Это мой компонент BlogEdit: 

class BlogEdit extends Component {
constructor(props) {
    super(props);
    const contentState = convertFromRaw(content);
    console.log(contentState);
    this.state = {
    editorState: EditorState.createEmpty(),       //I need to change this to actually render the content of content variable in editor
    contentState,
    }
    console.log(contentState);
}

Эта функция отвечает за изменение JSON в содержимом в соответствии сto editorState 

onContentStateChange: Function = (contentState) => {
    this.setState({
    contentState,
    });
};

И это часть рендеринга ... 

render() {
    const { editorState } = this.state;
    const { contentState } = this.state;
    return (
    <div>
        <Editor
        editorState={editorState}
        wrapperClassName="demo-wrapper"
        editorClassName="demo-editor"
        onContentStateChange={this.onContentStateChange}
        />

    </div>
    );
}
}

export default BlogEdit;

Так что на самом деле я должен делать?

Ответы [ 2 ]

0 голосов
/ 27 июня 2018

Вместо EditorState.createEmpty () вы можете создавать с содержимым, 

 let editorStatewithContent = EditorState.createWithContent(contentState);     
 //Then you set the state 
 this.state = {
   editorState:  editorStatewithContent      
}

Возможно, вам придется просмотреть документ, в котором все хорошо объяснено.

0 голосов
/ 17 июня 2018

Компонент редактора имеет имя свойства initialContentState .Вы можете передать содержимое здесь.

...