CODEWITHSUNDEEP
htmlreactjseditordraftjsreact-draft-wysiwyg
Ichrak Mansour
Ichrak Mansour

Reputation: 1932

How to push html to draft with react-draft-wysiwyg and draft js?

I get a Html string from my API : "consigne": "<p>test</p>\n" and I want to display it on my editor.

My Editor is :

<Editor id="consigne" name= "consigne" editorState={consigne} value={draftToHtml(convertToRaw(consigne.getCurrentContent()))} onEditorStateChange={(consigne) => {this.setState({consigne})} localization={{ locale: 'fr' }}/>

I want to insert this consigne on my editor.

How I can push this consigne to my editor ?

Upvotes: 2

Views: 4925

Answers (3)

Maxwell Wachira
Maxwell Wachira

Reputation: 1

Approach using functional components:

import { useState } from 'react';
import { EditorState, convertFromHTML } from 'draft-js';
import { ContentState } from 'react-draft-wysiwyg';

const blocks = convertFromHTML(htmlData);
const [editorState, setEditorState] = useState(() =>
     EditorState.createWithContent(ContentState.createFromBlockArray(blocks.contentBlocks, blocks.entityMap))
);

Upvotes: 0

Cong
Cong

Reputation: 188

For the recent version:

const blocks = convertFromHTML(plan.consigne);
this.setState({ 
  consigne: EditorState.createWithContent(ContentState.createFromBlockArray(blocks.contentBlocks, blocks.entityMap)) 
})

Upvotes: 1

Ichrak Mansour
Ichrak Mansour

Reputation: 1932

I find it by this :

  this.setState({ 
consigne:EditorState.createWithContent(ContentState.createFromBlockArray(convertFromHTML(plan.consigne))) 
    })

Upvotes: 1

Related Questions