Draft-js: How to retrieve html content with inline styles or classnames of the editor?

[igorpreston]

Hello,

I want to save html of the editor content preserving all styles upon button click. How can I access it or serialize the data?

Thanks.

[butchmarshall]

The editor doesn't actually represent the content as HTML internally, it uses its own representation.

What you'll need to do is write something to convert that representation into HTML.

The quick way to do it is...

1) Get the current content (ContentState)

let contentState = editorState.getCurrentContent()

2) Pass it to something like draft-js-export-html

import {stateToHTML} from 'draft-js-export-html';
let html = stateToHTML(contentState);

[igorpreston]

@butchmarshall great advice, thank you!

[nikhildaga]

Isnt it surprising that this function is not present in draft-js and we have to use external module for it?

[satyadeeproat]

@butchmarshall : I am having some problem while displaying the html content. Here is what I am doing
let htmldata = stateToHTML(contentState)
return (

{htmldata}

)

but I am getting complete HTML content like this.

Hello World

How to remove these

[sauravskumar]

@satyadeeproat if you are getting something like <div>Hello World</div>, then use dangerouslySetInnerHTML like eg below

<div dangerouslySetInnerHTML={{__html: stateToHTML(convertFromRaw(data))}}/>

[zeeshanjan82]

I am not able to export the styles. I am using the code like this:
var content = stateToHTML(this.state.content.getCurrentContent());
This exports everything except there is no style like color e.t.c

[thatsmeamal]

@zeeshanjan82 I am having the same issue.
How to export the inline styles of the editor content

[KumarAbhirup]

same issue here, just as @zeeshanjan82

[thibaudcolas]

This is the same issue as #319. See https://github.com/facebook/draft-js/issues/319#issuecomment-395996499 for suggestions of solutions:

If you want to convert Draft.js content to HTML reliably, have a look at one of the many helper libraries that do this: https://github.com/nikgraf/awesome-draft-js#common-utilities

I personally have used draft-convert and really liked it so far. Made a quick tutorial on how to use (with my editor, but that's not too important) over at https://www.draftail.org/docs/importing-and-exporting-html.

[jacobokoenig]

Has anyone figured out how to include styles on the exported HTML? No matter my configuration of stateToHTML or convertToHTML, styles are not included.

[jakubgrzelak]

Hey! I export editor content as html. In the exported html I see inline styles. But when I try to import them from html into editor they are lost.
Code from importing looks like that:
const blocksFromHTML = convertFromHTML(props.gift.description);

const contentStateFromHtml = ContentState.createFromBlockArray(blocksFromHTML.contentBlocks, blocksFromHTML.entityMap);

editorState = EditorState.createWithContent(contentStateFromHtml);

Did you find any solutions? @jacobokoenig?

[crusoexia]

seems like we can only use a ref to the editor and get innerHTML from a certain node inside?

[mdaffan]

I have this problem too, @jakubgrzelak you say in your exported HTML you see inline styles. Can you please show me the code you're using?

[alqamabinsadiq]

For those who want to export inline styles please have a look at the documentation of draft-js-export-html. You can pass a second argument called options. Check this out: https://github.com/sstur/draft-js-utils/tree/master/packages/draft-js-export-html

[bogdancss]

has anyone managed to get styles out from stateToHtml ?

[RAMKUMARDANE]

has anyone managed to get styles out from stateToHtml ?
https://github.com/sudipta-pran/react-draft-wysiwyg-blogger/tree/master/client/src/components/admin/EditPost.js

EditPost.txt

not confident for all styles but sure most will be resolved and then you can further implement on your own logic
(download file and change extension txt to js)

[dounai1306]

Hey! I export editor content as html. In the exported html I see inline styles. But when I try to import them from html into editor they are lost.
Code from importing looks like that:
const blocksFromHTML = convertFromHTML(props.gift.description);

const contentStateFromHtml = ContentState.createFromBlockArray(blocksFromHTML.contentBlocks, blocksFromHTML.entityMap);

editorState = EditorState.createWithContent(contentStateFromHtml);

Did you find any solutions? @jacobokoenig @jakubgrzelak?

[BiancaArtola]

Hey! I export editor content as html. In the exported html I see inline styles. But when I try to import them from html into editor they are lost.
Code from importing looks like that:
const blocksFromHTML = convertFromHTML(props.gift.description);

const contentStateFromHtml = ContentState.createFromBlockArray(blocksFromHTML.contentBlocks, blocksFromHTML.entityMap);

editorState = EditorState.createWithContent(contentStateFromHtml);

Did you find any solutions? @jacobokoenig?

Same issue here