Draft-js: serialization?

[brigand]

I may be missing something in the docs, but how do you serialize a draft.js editor, send it to the server, and then load it again?

I know there are third party things for creating html, but I don't see how you'd load that back into the editor.

This is half a support question, and half a request for docs. I can write them once I figure it out.

I'm guessing you can't just .toJS/fromJS on the EditorState because there are sub-objects with special methods.

[sophiebits]

You can use these:

http://facebook.github.io/draft-js/docs/api-reference-data-conversion.html#content

[brigand]

Thanks! Sorry I missed that.

[sophiebits]

Don't apologize! Feel free to send a PR to make this clearer if you looked elsewhere in the docs.

[brigand]

I wrote a guide for doing it, but I'm not sure if it should be its own page, or part of getting started. Part of it is copied from the reference page. Also, feedback?

---

Serialization

Because a text editor doesn't exist in a vacuum and it's important to save
contents for storage or transmission, you will want to be able to convert
ContentState into a plain JS object, and vice versa.

import {Editor, EditorState, convertToRaw} from 'draft-js';

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
    this.onSave = () => {
      var content = this.state.editorState.getCurrentContent();
      var raw = convertToRaw(content);
      $.post('/api/comment', {comment: raw}, () => {
        alert('Saved');
      });
    };
  }
  render() {
    return (
      <div>
        <Editor editorState={this.state.editorState} onChange={this.onChange} />
        <button onClick={this.onSave}>Save</button>
      </div>
    );
  }
}

You can then load it back into an EditorState.

var editorState = EditorState.createWithContent(convertFromRaw(raw));

To display this elsewhere in your site, you can create an Editor component with
the readOnly prop set to true.

<Editor editorState={editorState} readOnly />

[barbu110]

@brigand your guide it explains it pretty well.

However I have some questions regarding saving and reading from a database. So, say I write a blog post and get its content using convertToRaw. Should I save and read JSON in/from the database?

[brigand]

@barbu110 yeah, and since you don't need to query it, you can just store it as a string instead of using a json data field.

[Grsmto]

This should definitely be accessible somewhere in the doc. I feel like as soon as you use a rich text editor you want to input/output datas from it and this is lacking of informations on how/what can/cannot do Draft about this.
I saw loads of issues related to html conversion too, having a line saying that Draft doesn't support HTML export (and the import is very basic) somewhere on the Data Conversion page would help.

Also to complete this guide, I would say that users may need to serialise the JS object to/from string like so:
Sending to DB:
JSON.stringify(convertToRaw(content))

Reading from DB:
Draft.convertFromRaw(JSON.parse(content))

[kevinguard]

@brigand, What if we want to get the raw data after reading it from database and render it as HTML? Is there any clean way you might be aware of to accomplish this? I know stateToHTML from draft-js-export-html but that doesn't, for example, support iframes. It simply removes them! Thoughts?

[brigand]

@kevinguard did you try <Editor editorState={editorState} readOnly />?

[kevinguard]

@brigand Thanks for prompt response. It worked like a charm! 👍

[tj]

Definitely a little tricky to find in the docs, "data conversion" -> "import & export" or something maybe.

[johnlin0207]

thanks a lot!

I wrote a guide for doing it, but I'm not sure if it should be its own page, or part of getting started. Part of it is copied from the reference page. Also, feedback?

Serialization

Because a text editor doesn't exist in a vacuum and it's important to save
contents for storage or transmission, you will want to be able to convert
ContentState into a plain JS object, and vice versa.

import {Editor, EditorState, convertToRaw} from 'draft-js';

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
    this.onSave = () => {
      var content = this.state.editorState.getCurrentContent();
      var raw = convertToRaw(content);
      $.post('/api/comment', {comment: raw}, () => {
        alert('Saved');
      });
    };
  }
  render() {
    return (
      <div>
        <Editor editorState={this.state.editorState} onChange={this.onChange} />
        <button onClick={this.onSave}>Save</button>
      </div>
    );
  }
}

You can then load it back into an EditorState.

var editorState = EditorState.createWithContent(convertFromRaw(raw));

To display this elsewhere in your site, you can create an Editor component with
the readOnly prop set to true.

<Editor editorState={editorState} readOnly />

helps me,thanks a lot!