I'm looking for some help on how to convert a string of html like below to draftjs and convert back to html to display on a page as html without a rich text editor or WYSIWYG:
const htmlString = `<p>hello world</p>
<ul>
<li>hello</li>
<li>world</li>
<ul>
<p>this is my string</p>`
I have used draft-js method convertFromHtml which results in this:
{
"contentBlocks": [
{
"key": "f9aci",
"type": "unstyled",
"text": "hello world ",
"characterList": [
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
}
],
"depth": 0,
"data": {}
},
{
"key": "boi9l",
"type": "unordered-list-item",
"text": "hello ",
"characterList": [
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
}
],
"depth": 0,
"data": {}
},
{
"key": "fbf9j",
"type": "unordered-list-item",
"text": "world ",
"characterList": [
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
}
],
"depth": 0,
"data": {}
},
{
"key": "ejvm",
"type": "unstyled",
"text": "this is my string",
"characterList": [
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
},
{
"style": [],
"entity": null
}
],
"depth": 0,
"data": {}
}
],
"entityMap": {}
}
i have tried using convertToRaw
and then ConvertFromRaw
with no avail just getting errors
Invariant Violation: invalid RawDraftContentState
My ultimate goal is to convert to draftjs for the server but when i receive the data to be able to convert back and display as html.