2

I've got my Draft js editor working fine, it saves to my database, using convertToRaw(editorState1.getCurrentContent()), and I am getting it back and converting it to HTML using draft-js-export-html and stateToHTML(convertFromRaw(dbContent.content.text01)).

So far so good... but now I have raw HTML that I want to display in my react component, and here comes the trouble.

Just rendering it with {props.text01} outputs it as a string and turns into <p>adfasfadfs</p> as text.

Obviously I want it to render as HTML. How do I do that?

I have looked at dangerouslySetInnerHTML but I would prefer not having ANOTHER plugin just to get my Draft js working the way I want it to.

Am I going at it the wrong way, or is dangerouslySetInnerHTML the only way to do it?

Winter
  • 2,407
  • 1
  • 19
  • 28
  • can you provide fiddle for this? – MehulJoshi May 11 '17 at 11:42
  • Not really, draft.js and draft-js-export-html would make that pretty complicated. – Winter May 11 '17 at 11:46
  • added answer, it will help you. I guess. – MehulJoshi May 11 '17 at 11:47
  • 1
    dangerouslySetInnerHTML should work just fine (it's not a plugin, it's provided by React). But why don't you render it using Draft with readOnly set to true? I guess my question is what reasons you have for using stateToHTML. – tobiasandersen May 11 '17 at 12:04
  • @tobiasandersen the thing is that I will sometimes have to do some manipulation on the content, which is kind of complicated. I have not implemented it yet, but right now it seems easier to me to modify the html instead of the json object. – Winter May 11 '17 at 12:07
  • btw, thanks for pointing out that dangerouslySetInnerHTML is not a plugin, my bad for just assuming it was :/ – Winter May 11 '17 at 12:11
  • Now I don't know what manipulation you're going to do, but I can't imagine converting it to html will make it easier. You could try asking for advice in the Draft slack channel, or post another issue here :) – tobiasandersen May 11 '17 at 12:14
  • The manipulation concerns splitting the html code over several "pages" or columns. There is a jquery plugin to do this and I was thinking of trying to reverse engineer it, but have not gotten very far with that yet. I probably should post a question about it here. But the reason I think it will work better in html is that I will have to be comparing heights in the dom to see how much fits before I create a new page/column. – Winter May 11 '17 at 12:19
  • Oh I see, maybe that is easier then. Maybe you could use the HTML rendered by Draft as the base though? Not sure it's a good solution, but could be worth trying! – tobiasandersen May 11 '17 at 12:27
  • Thanks for the suggestion, I will look into it. – Winter May 11 '17 at 12:30

2 Answers2

3

As described in this answer, React will escape HTML by default (that's why it's just rendered as a string). But you can force the rendering by using the dangerouslySetInnerHTML property. You'd just have to take potential XSS attacks into consideration.

If Draft is already installed, another way to just simply render the content is to use the readOnly prop on the DraftEditor.

Community
  • 1
  • 1
tobiasandersen
  • 8,480
  • 3
  • 28
  • 39
2

you can use this npm module. link is link npm install --save html-to-react

Examples

Simple The following example parses each node and its attributes and returns a tree of React elements.

var ReactDOMServer = require('react-dom/server');
var HtmlToReactParser = require('html-to-react').Parser;

var htmlInput = '<div><h1>Title</h1><p>A paragraph</p></div>';
var htmlToReactParser = new HtmlToReactParser();
var reactElement = htmlToReactParser.parse(htmlInput);
var reactHtml = ReactDOMServer.renderToStaticMarkup(reactElement);

assert.equal(reactHtml, htmlInput); // true
MehulJoshi
  • 879
  • 8
  • 19
  • looks interesting. I am not rendering on a server though, will it still work? – Winter May 11 '17 at 11:49
  • here reactElement is a pure react element, you can insert it in react directly, so you can skip ReactDOMServer if you want. – MehulJoshi May 11 '17 at 11:55
  • Thanks @MehulJoshi for your answer, it seems very interesting, but is probably a bit overkill for what I need at the moment. – Winter May 11 '17 at 12:24