Draft-js: How do I retrieve the content in its current state?

[brandondurham]

I’d like to allow for users to save their content in a way that Draft will recognize when loaded again. What is the recommended way to retrieve the content in its current state? I assume the content would look something like this?

[davisml]

To retrieve the raw data call this:

var rawData = Draft.convertToRaw(editorState.getCurrentContent())

To create an EditorState from the raw data:

var contentState = Draft.ContentState.createFromBlockArray(Draft.convertFromRaw(rawData))
var editorState = Draft.EditorState.createWithContent(contentState)

[brandondurham]

Fabulous. Thanks so much!

[hellendag]

:)

[cogell]

Is there a way to get rawContent mapped to HTML with our already defined decorators, styleMap, blockStyleFn, etc

[hellendag]

Since we don't use markup or markdown to store rich content at Facebook, I haven't built any such utilities for this repo. (Since I wouldn't want to build and release something we aren't using in prod on FB.)

Feel free to create such a utility, though -- I'm sure there will be others who need it too.

If you just need to render your content statically within React, you can use the readOnly prop on Editor.

[cogell]

Thanks for your quick reply. Will do!

[zhang-z]

@cogell , +1 for retrieve HTML content util
@hellendag , wondering how you handle rich content at FB :)

[lolripgg]

@hellendag @cogell I'm going to start working on conversion utilities for both Markdown and HTML this evening. I'll submit a PR when they're done, in case they are useful for the project.

[cogell]

@brwr Thanks, I haven't had time to start anything on that utility. Happy to review and be of assistance since I'll need this moving forward on my project as well.

[davisml]

Here is a gist that converts DraftJS raw block data to HTML:

https://gist.github.com/davisml/2b5184f64c59eb3745fd

Supports H1, H2, blockquote, ul, ol, strong, em and underline styles mapped to the rich text example. Uses a modified version of AttributedString.js (https://github.com/cohitre/attributedString.js) to format the style ranges.

[c-h-]

Not sure why but the only way I was able to restore state was by skipping the middle step in the above comment like so:

var rawData = Draft.convertToRaw(editorState.getCurrentContent())
var editorState = Draft.EditorState.createWithContent(Draft.convertFromRaw(rawData))

Just in case anyone else comes here and has issues when trying to use Draft.ContentState.createFromBlockArray!

[Rahulgarg30591]

Hello, I have also tried draft-Js-export stateToHtml function, but the function is not working in IE is there any other way to get HTML from DraftJS editor?

[gopal151295]

@davisml

To retrieve the raw data call this:

var rawData = Draft.convertToRaw(editorState.getCurrentContent())

To create an EditorState from the raw data:

var contentState = Draft.convertFromRaw(rawData) // convertFromRow already returns contentState, no need to 'createFromBlockArray()'
var editorState = Draft.EditorState.createWithContent(contentState)

[dmanohar2k9]

Manohar D