Draft-js: [Question]How to pass data which is fetched from server into the Editor?

[liran319]

render (
    <div>
         <RichEditor id='blog-edit-area'  {...body_html} value={body_html.value}/>
    </div>
)

And RichEditor is a component based on Editor of Draft.js:

<Editor
      editorState={this.state.editorState}
      onChange={this.onChange}
      placeholder="Enter some text..."
      ref="editor"
/>

But I cannot find where I can pass the current data(body_html) into the Editor?
Anyone could do me a favor? Many thanks!

[davidbyttow]

If you want to pass raw HTML, you will need to do this programmatically with convertFromHTML. See https://facebook.github.io/draft-js/docs/api-reference-data-conversion.html#convertfromhtml

From there you'd do something like this in your constructor:

const {bodyHtml} = this.props;
const blocks = convertFromRaw(bodyHtml);
const contentState = ContentState.createFromBlockArray(blocks);
const editorState= EditorState.createWithContent(contentState);
this.state = { editorState };

[Catlite91]

While rendering the html
"<div style=\"color:#A52A2A\">HELLO</div>"
the result missed the style.Is there something wrong? Many Thanks!

[hellendag]

Styles are not preserved in the conversion step. In the Draft model, styles like color are not represented in HTML, but rather in the model data. For instance, you could specify a named inline style for your desired color, and apply it to your content.

Since the conversion utility cannot make straightforward assumptions about the styles you might wish to preserve, it does not manage this for you. This may be doable via configuration, if we move in the direction of defining a schema for mapping elements to blocks and styles to inline style string values. For now, though, this isn't doable.

So there's nothing wrong with what you're doing here -- Draft just can't preserve these values.