Ewan Valentine Ewan Valentine - 1 year ago 165
Javascript Question

I can't get the html output from draft-js?

I've been playing around with draft-js by Facebook, but I can't actually figure out how to get the html output of the editor. The console.log in the following example outputs some

properties, but they don't seem to contain my actual content?

class ContentContainer extends React.Component {
constructor(props) {
this.state = {
value: '',
editorState: EditorState.createEmpty()
this.onChange = (editorState) => this.setState({editorState});
this.createContent = this.createContent.bind(this);

createContent() {

render() {
const {editorState} = this.state;
const { content } = this.props;
return (
<br /><br /><br />
<ContentList content={content} />
<div className="content__editor">
<Editor editorState={editorState} onChange={this.onChange} ref="content"/>
<FormButton text="Create" onClick={this.createContent.bind(this)} />

Answer Source

There is a handy library I used, draft-js-export-html. Import the library and you should be able to see HTML once you invoke the function, stateToHTML:


I'm pretty new to React so hopefully this works for you. I looked under the hood of contentState and there is a fair bit going on there that makes using a library to parse out the entities that much more enticing.

The author, sstur, answers a tangentially-related question where I learned about his libraries.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download