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.getPla

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

There are a bunch of useful answers here so I want to add this jsfiddle demo. It shows how it works in action. For saving and retrieving of the content of the editor, here local storage is used. But for database case, the basic principle the same.

In this demo, you can see simple editor component, when you click on SAVE RAW CONTENT TO LOCAL STORAGE, we save current editor content as a string to local storage. We use convertToRaw and JSON.stringify for it:

 saveRaw = () => {
  var contentRaw = convertToRaw(this.state.editorState.getCurrentContent());

  localStorage.setItem('draftRaw', JSON.stringify(contentRaw));
}

If after that you reload the page, your editor will be initialized with the content and styles what you save. Becouse of in constructor we read the appropriate local storage property, and with JSON.parse, convertFromRaw and createWithContent methods initialize editor with the previously stored content.

constructor(props) {
  super(props);

  let initialEditorState = null;
  const storeRaw = localStorage.getItem('draftRaw');

  if (storeRaw) {
    const rawContentFromStore = convertFromRaw(JSON.parse(storeRaw));
    initialEditorState = EditorState.createWithContent(rawContentFromStore);
  } else {
    initialEditorState = EditorState.createEmpty();
  }

  this.state = {
    editorState: initialEditorState
  };
}

Answer 3

If you're going to save the raw content to your db using an AWS Lambda, I recommend stringifying within your Lambda code so you can then escape the single quotes; Then store it:

const escapedValueToStore = JSON.stringify(contentStateObject).replace(/'/g, '\'\'');

It's a bit involved, but it's basically because you stringify your data object when sending to your Lambda (via API Gateway) using POST.

You then need to parse that object, which then returns your ContentState into an Object without escaping the single quotes. You do the above-mentioned code to escape the quotes.

When using the data client side, all you need to do is parse it again as you convert it from raw:

EditorState.createWithContent(convertFromRaw(JSON.parse(rawContentState))

EDIT

On second thought, I guess you can just stringify, and escape the content on the client-side as well

Answer 4

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) );