Loading HTML content into editor about react-draft-wysiwyg

[iphonic]

For ones who are wondering how to initialize it with HTML content instead of empty here is the way you need to generate editorState with the content you have, to init editorState there is a function in draft-js EditorState component and I am using a converter draft-js-import-html which allows to generate contentState out of HTML content, see below

import {EditorState, ContentState, convertFromHTML, convertToRaw} from 'draft-js';
import {stateFromHTML} from 'draft-js-import-html';

constructor(props) {
    super(props);
    var contentState = stateFromHTML(props.input.value);
    editorState = EditorState.createWithContent(contentState);
    this.state = {editorState: editorState};
}

Above works for me.

[Ranganathan95]

@jpuri & @iphonic , I tried statefromHTML and also convertFromHTML from draft-js. both were working fine, but when the content has underline/subscript/superscript content, it was rendered as normal text. Is there any work-around available?
Note: Bold and italic styles working fine.

[elebumm]

@iphonic's result worked for me perfectly. I am using functional components though so here is my solution:

  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  useEffect(() => {
   // automatedMessage is the html string I am fetching from my server
    if (automatedMessage) {
      let contentState = stateFromHTML(automatedMessage.message); //automatedMessage.message being "<p>Test</p>"
      setEditorState(EditorState.createWithContent(contentState));
    }
  }, [automatedMessage]);

[ytwater]

I ran into the same problem where my editorContents was null the first time I rendered, then was populated on a second render. A quick and dirty fix of not rendering until I know the data is there worked for me.

` render() {

const { editorContents } = this.state;

if (!editorContents) {
  return <div />;
}

return (
  <div>
    <div className="demo-label">
      Editor with output generated in HTML.
    </div>
    <div className="demo-editorSection">
      <Editor
        toolbarClassName="demo-toolbar"
        wrapperClassName="demo-wrapper"
        editorClassName="demo-editor"
        rawContentState={editorContents}
        onChange={this.onEditorChange.bind(this)}
        toolbar={{
          options: ['inline', 'blockType', 'textAlign', 'link', 'remove', 'history'],
          inline: {
            options: ['bold', 'italic', 'underline', 'strikethrough'],
          },
        }}
      />
    </div>
  </div>
);

}`

[jpuri]

Hi @alagos ,

Check similar example here: https://github.com/jpuri/react-draft-wysiwyg/blob/master/docs/src/components/Demo/index.js#L140

[alagos]

@jpuri yes, actually, that's the specific example I'm basing of. Instead of using sampleEditorContent to load the content in rawContentState={sampleEditorContent} I loaded it from the state and I almost copy/pasted the content from https://github.com/jpuri/react-draft-wysiwyg/blob/master/docs/src/util/sampleEditorContent.js to my _getInitialHTML function to load the initial data for the state, but is not working.
Not sure if has something to do, but I'm using 0.2.1 version.

[jpuri]

ok try to do a console log and check whats coming in editorContent after this line const { editorContent } = this.state;.

[alagos]

That's the result with console.log(JSON.stringify(editorContent));:

{
  "entityMap": {},
  "blocks": [
    {
      "key": "1n9j8",
      "text": "Hello world",
      "type": "unstyled",
      "depth": 0,
      "inlineStyleRanges": [],
      "entityRanges": [],
      "data": {}
    }
  ]
}

and after I click the editor to write something and render is reevaluated, the result is:

{
  "entityMap": {},
  "blocks": [
    {
      "key": "a5b87",
      "text": "",
      "type": "unstyled",
      "depth": 0,
      "inlineStyleRanges": [],
      "entityRanges": [],
      "data": {}
    }
  ]
}

[jpuri]

Its looks like editor is re-mounting in each render - which I do not expect to be the case, it may be an issue with Modal component.

Ideally editor should have been initialized only once but apparently its content are reset second time also.

[jpuri]

@ytwater: you can also check new contentState property (detailed in docs) it can be used not only for initializing but also changing editor content.

[jpuri]

@alagos: is your issue resolved, can I do something more to help it ?

[alagos]

@jpuri at the end I moved to another editor as I couldn't figure out what was going on, sorry about that. Anyway thanks for the help :)

[kamote]

same issue here using react-bootstrap modal

[lvian]

@iphonic Thanks for posting, was having problems loading the content stored in the DB back into the editor and your post solved it.

[andrew-w0711]

@iphonic Thanks for your answer

[swapster]

when the content has underline/subscript/superscript content, it was rendered as normal text

The same problem. Is there any solution?