How to display the saved content of a DraftJS editor?

Question

I am actually saving the contentState of my DraftJS editor as a string, using: JSON.stringify(convertToRaw(editorState.getCurrentContent()))

My question is: How to display it back, as a Post for example. I am thinking that I should still use DraftJS to display it back, since only DraftJS can naturally parse the result of convertFromRaw(JSON.parse(...)).

The problem is that the Link entities for example are not clickable in the editor, and when I browse the API of EditorState and ContentState, I don't see something like viewMode, or something like that, so I am confuse.

Please help.

Answer 1

You can display the rawContent by doing something like this:

import { Editor} from 'draft-js';

export default class ShowContent extends React.Component {
  constructor(props){
    this.state = { editorState: convertFromRaw(JSON.parse(...))};
  }

  render(){
    return <Editor editorState={this.state.editorState} readOnly />
  }
}

Your assumption about a viewMode property is correct. It's the "readOnly" attribute on the Editor component you import from Draft.