4

I want to store data that is being edited with Draft.js and React (in the UI) into a MySQL database.

I am not sure in which format should I store my data, so that I can fetch the data from database and display it on the page with the formatting applied while writing the text?

For example - I applied bold style to some of the text and gave some line breaks. How to store this info for later use?

Please suggest a format to store my data.

Yangshun Tay
  • 49,270
  • 33
  • 114
  • 141
chitresh jain
  • 49
  • 1
  • 2

3 Answers3

6

You could save it as a string format. To elaborate, you can use a JSON-serialized string of the ContentState as mentioned in the Draft JS docs.

Draft JS has utility methods convertFromRaw and convertToRaw to help you. Check out the docs linked above, they are pretty clear.

Yangshun Tay
  • 49,270
  • 33
  • 114
  • 141
1

For anyone still facing this issue, basically you have to convertToRaw, then JSON.stringify it. Then this can be sent to your backend as a string. To display it, make a GET request for that particular data, then JSON.parse it and then convertFromRaw. Pass this into another RichTextEditor as the editorState but set the readOnly={true}

aderchox
  • 3,163
  • 2
  • 28
  • 37
jmonica9
  • 11
  • 2
1

Draft.js is archiving.

A new alternative is lexical

You can find its playground here: https://playground.lexical.dev/

Xin
  • 33,823
  • 14
  • 84
  • 85