How to start with value from database (text)

[felipenmoura]

If I have a text in my database (an HTML markup), how can I load it into this component?
I couldn't find documentation on how to convert it!

[niuware]

Thanks for using this component!
The MUIRichTextEditor component expects a stringified Draft.Model.Encoding.RawDraftContentState object, so you can do the following:

...
import { convertFromHTML, ContentState, convertToRaw } from 'draft-js'
import MUIRichTextEditor from '../../'

const sampleMarkup = '<b>Bold text</b>, <i>Italic text</i><br/ ><br />Other text<br /><br /><a href="http://myurl.com">Some link</a>'

// 1. Convert the HTML
const contentHTML = convertFromHTML(sampleMarkup)

// 2. Create the ContentState object
const state = ContentState.createFromBlockArray(contentHTML.contentBlocks, contentHTML.entityMap)

// 3. Stringify `state` object from a Draft.Model.Encoding.RawDraftContentState object
const content = JSON.stringify(convertToRaw(state))

...

<MUIRichTextEditor 
    value={content} 
/>

I have updated the examples directory as well if you want to take a look. Hope this helps you out!

[felipenmoura]

Oh, I see, It worked!
Thanks for the answer, and for updating the documentation :)

[felipenmoura]

Sorry for bothering again @niuware !
Is there a way I can grab the final HTML content after the user has finished editing?
I see I can listen for each and every change (which gives me an object). I wanted to avoid having to parse it back to HTML on each keystroke just to be able to use it when the user clicks the "Finish" button. Any alternative?

Also, I noticed the onSave icon, I just want to trigger that event from a different button outside the editor.
As for the HTML content, I'm trying to use the module draft-js-export-html, but it explodes in an internal error! (TypeError: this.contentState.getBlocksAsArray is not a function)

Thanks once again :)

[niuware]

Hi @felipenmoura
You have several alternatives for the task you want to accomplish.

1. If you want to use an external button, please check the ref-save included example.

2. If you want to use the included onSave property, note that the handler will receive the stringified content state, so you will have to use convertFromRaw to first parse it into a ContentState object, and then treat it accordingly, in this case pass it to the plugin you want to use.

3. The last option is creating your own callback custom control so when the user clicks you can use the getCurrentContent method to get the ContentState and then use the plugin you want to use.

Hope one of this options helps you out!

[felipenmoura]

Great, thanks, it helped a lot.

[felipenmoura]

Ops, accidentally reopened the issue!