Draft js. Persist EditorContent to database

Question

I'm trying to persist draft-js's EditorContent to database then read and recreate the EditorContent object again. But EditorContent.getPlainText() strips away rich text content. I don't know how else to do it.

How do I properly persist EditorContent?

Answer 1

The getPlainText() method, as its name suggests, only returns the plain text without any rich formatting. You should use the convertToRaw() and convertFromRaw() functions to serialize and deserialize the contents of the editor.

You can import them this way if necessary: (assuming you are using ES6)

import {convertFromRaw, convertToRaw} from 'draft-js'; 

If you need to export HTML instead, see https://medium.com/@rajaraodv/how-draft-js-represents-rich-text-data-eeabb5f25cf2#9260 (not sure you can import the contents back from HTML, though)

Answer 2

I've found that I must stringify and parse the RawContentState object when reading and saving to the database.

import { convertFromRaw, convertToRaw } from 'draft-js';  // the raw state, stringified const rawDraftContentState = JSON.stringify( convertToRaw(this.state.editorState.getCurrentContent()) ); // convert the raw state back to a useable ContentState object const contentState = convertFromRaw( JSON.parse( rawDraftContentState) );