draftjs how to initiate an editor with content

Question

Stumbled on this cool text editor, draft.js by Facebook. I tried to follow the example in Github, but I want to create an editor with content instead of an empty editor.

var EditorState = Draft.EditorState;  var RichEditor = React.createClass({    getInitialState(){       return {editorState: EditorState.createWithContent("Hello")}       //the example use this code to createEmpty editor      // return ({editorState: EditorState.createEmpty()})    } }); 

When I run it, it throws an error with the following message "Uncaught TypeError: contentState.getBlockMap is not a function".

Answer 1

The first argument to EditorState.createWithContent is a ContentState, not a string. You need to import ContentState

var EditorState = Draft.EditorState; var ContentState = Draft.ContentState; 

Use ContentState.createFromText And pass the result to EditorState.createWithContent.

return {   editorState: EditorState.createWithContent(ContentState.createFromText('Hello')) }; 

Answer 2

I've created a set of packages for DraftJS to help with importing and exporting content (HTML/Markdown). I use these in my project react-rte. The one you're probably looking for is: draft-js-import-html on npm.

npm install draft-js-import-html 

An example of how you might use it:

var stateFromHTML = require('draft-js-import-html').stateFromHTML; var EditorState = Draft.EditorState;  var RichEditor = React.createClass({   getInitialState() {     let contentState = stateFromHTML('<p>Hello</p>');     return {       editorState: EditorState.createWithContent(contentState)     };   } }); 

The modules I've published are:

• draft-js-import-html
• draft-js-export-html
• draft-js-import-markdown
• draft-js-export-markdown